嘗試使用可通過按鈕事件應用的CSS樣式

目前我正在學習網頁設計和網站開發，並創建了一個網站，作爲證明我在http//.www.ahandbuilt.website

（是的，我知道這看起來很亂，但我仍然在學習所學的手段它似乎我試圖跑步之前，我可以走路）

在主頁上，你會看到三個按鈕，旨在提供點擊更改頁面。

前兩個按鈕的設計使主頁可以在應用CSS樣式或應用CSS樣式的情況下查看 - 以顯示CSS對頁面外觀的影響。

在我的HTML文檔的頭，我有一個CSS鏈接標籤如下：

<link rel="stylesheet" href="">

，並有一個樣式名爲handbuilt.css

因此，頁面打開沒有任何造型，但當點擊適當的按鈕時，它應該更新css鏈接的href值：

<link rel="stylesheet" href="handbuilt.css">

反之亦然。

問題是按鈕不改變鏈接中的href。我會很感激任何指針。我沒有完整的答案 - 只是一個指向我要出錯的指針。

我正在使用的網站規則，意味着我只能使用直接的代碼，沒有框架。我目前的能力意味着我在HTML上工作得很舒服，可以使用CSS並且可以使用JavaScript。

任何意見或指針將不勝感激。

來源

2016-09-19 Andrew Brown

看起來像你工作！希望我的回答有幫助。 –

非常感謝您的建議。在測試和上傳之前，我花了幾天的時間學習瞭解錯誤的位置，並且還玩了其他按鈕的onclick操作。 –

任何意見或指針將不勝感激。

嘗試打開developer tools在您的瀏覽器（我在Firefox使用Firebug，但內置的開發工具也很棒），並期待在控制檯輸出，當你點擊按鈕。如果你還不熟悉開發工具，一定要檢查一下。他們會讓你的編碼生活變得更容易。

我不是一個完整的答案 - 只是一個指針，我要去哪裏錯了。

當我看着我的Firebug控制檯，同時點擊按鈕，我看到一個錯誤ReferenceError: myFunction is not defined。

看起來好像你在定義之前調用myFunction函數。瀏覽器不知道如何處理它，所以函數沒有被執行。

可能還有其他問題，但我會先嚐試讓此函數實際執行。

來源

2016-09-19 14:47:26

非常感謝您的建議。在測試和上傳之前，我花了幾天的時間學習瞭解錯誤的位置，並且還玩了其他按鈕的onclick操作。 –

使用jQuery需要：

$("link:first").attr('href',"handbuilt.css");

例如

<button onclick="$('link:first').attr('href','handbuilt.css');">Click to see page with Styling</button>

的JS需要給ID爲鏈接元素。例如

<link rel="stylesheet" href="" id="styleid">

然後

document.getElementById("styleid").href = "handbuilt.css"

例如（這是在您的網站的工作）

<button onclick="document.getElementById('styleid').href = 'handbuilt.css'">Click to see page with Styling</button>

來源

2016-09-19 14:49:25 Rex

非常感謝您的建議。在測試和上傳之前，我花了幾天的時間學習瞭解錯誤的位置，並且還玩了其他按鈕的onclick操作。 –

爲了做到這一點，你需要使用JavaScript來動態地更新HTML你的頁面的代碼。你已經有一個JavaScript函數鏈接到您的按鈕（myFunction0，你現在需要有相當的JavaScript代碼來更新樣式表

，你應該在你的標題是這樣的：

<script type="text/javascript"> 
function myFunction(){ 
    //your code 
} 
</script>

你可以找到在這個功能here。什麼就寫一個想法，應該足以爲您解決這個！

來源

2016-09-19 14:53:04 P13

非常感謝您的建議。在測試和上傳之前，我花了幾天的時間學習瞭解錯誤的位置，並且還玩了其他按鈕的onclick操作。 –

Gald聽到這些，保持良好的工作，你在正確的軌道:) – P13

考慮看看你的JavaScript功能，您使用的方法「的getElementById」正如我敢肯定你知道，你可以在HTML中爲你的元素添加一個Id屬性，這正是這個方法正在尋找。要驗證，您可以打開您的開發人員工具（在Chrome中，您可以使用F12或右鍵單擊並選擇「檢查」）。在開發人員工具中，有一個控制檯，您可以在其中編寫JavaScript，並將返回結果。這也是顯示用console.log（）等記錄的信息的地方。試着在控制檯中添加一個Id並使用元素並使用'getElementById'方法來查看它返回的內容。

一旦你探索了這個，你可能想知道你可以在選擇它之後用JavaScript修改元素的屬性。一些自我探索或谷歌會告訴你如何做到這一點。這樣，你可以修改正是您的鏈接將頁面..

來源

2016-09-19 14:58:06 Gavin

非常感謝您的建議。在測試和上傳之前，我花了幾天的時間學習瞭解錯誤的位置，並且還玩了其他按鈕的onclick操作。 –

@AndrewBrown：只需再次查看您的網站，我很高興你的問題解決了。我知道這可能不是你現在正在尋找的東西，但如果你還沒有，你一定要檢查出jQuery。它非常強大。 – Gavin

HTML：

在頭：

<link rel="stylesheet" href="./css/style1.css" id="styling">

在車身：

<button type="button" name="button" onclick="toggleCSS()"> Toggle CSS </button>

JS：

function toggleCSS() 
    { 
    var link = document.getElementById('styling'); 
    link.disabled = !link.disabled; 
    }

By t他的代碼，我通過按鈕事件啓用和禁用CSS。簡單！ :-)

來源

2017-06-26 12:21:31

嘗試使用可通過按鈕事件應用的CSS樣式

回答

相關問題