根據本地存儲中的值更改類屬性

我的頭中有js檢查本地存儲並相應地設置樣式表。我正在使用Bootstrap導航欄，我希望導航欄也根據本地存儲改變爲反色，但我無法使其工作。我認爲這是因爲導航欄代碼在正文中。根據本地存儲中的值更改類屬性

碼在頭部分：

<script> 
    if (localStorage.getItem("theme") == "light") { 
     document.getElementById("maincss").href = "./css/main.css"; 
    } else if (localStorage.getItem("theme") == "dark") { 
     document.getElementById("maincss").href = "./css/dark.css"; 
    } else { 
     document.getElementById("maincss").href = "./css/main.css"; 
    }; 
</script>

代碼在下面的身體部分：

<nav class="navbar navbar-default navbar-fixed-top" id="navbarid">

我想改變導航欄來導航欄逆使用引導類「導航欄逆」如果localStorage是「黑暗」。

我只是不能解決如何在頁面加載時檢查localstorage（如在head部分）並更改nav class（在body部分）。

任何指導讚賞。謝謝。

來源

2017-01-21 Leonard Bassoon

代碼在<script>標記在頁面解析過程中被有效地就地運行，因爲它位於頭部，導航欄並沒有尚未解析。

你想要的是將你的腳本作爲一個函數，例如在文檔加載時調用它。

<script> 
function checkStorage(){ 
    if (localStorage.getItem("theme") == "light") { 
     document.getElementById("maincss").href = "./css/main.css"; 
    } else if (localStorage.getItem("theme") == "dark") { 
     document.getElementById("maincss").href = "./css/dark.css"; 
    } else { 
     document.getElementById("maincss").href = "./css/main.css"; 
    }; 
} 
</script>

然後可以在導航欄準備就緒後調用該函數。大多數JavaScript庫提供該功能，例如jQuery $(document).ready(checkStorage);就足夠了。我敢打賭，bootstrap也有類似的東西。但我建議你用這些簡單的香草解決方案試圖嘗試瞭解發生了什麼：

<nav class="navbar navbar-default navbar-fixed-top" id="navbarid"> 
<script>checkStorage();</script>

和

<body onload="checkStorage()" > 
...

你能預測與這兩個會發生什麼？

來源

2017-01-21 15:54:42 Boris

謝謝。我得到了checkStorage（）函數的一部分。在我嘗試並實現它之前，爲了回答您的問題，我認爲在導航欄加載第一個後，腳本將檢查本地存儲。所以我可以添加代碼來改變函數中的類。在第二種情況下，我認爲它會在身體加載時運行，但是在身體開始加載之前或加載完成之後呢？我會嘗試他們兩個。 –

好電話:)。這實際上是在頁面和資源被加載之後（例如資源是圖像的'src =「...」'和css鏈接標記的'href'）。 – Boris

http://www.w3schools.com/jsref/event_onload.asp。但jquery的onready可能是你最終想要的 – Boris

爲什麼沒有的東西還可以指派類像

document.getElementById("navbarid").className += "navbar-inverse"

，並刪除其在其他情況下

document.getElementById("navbarid").className.replace 
    (/(?:^|\s)MyClass(?!\S)/g , '')

檢查鏈接，其他類的代碼示例： Change an element's class with JavaScript

來源

2017-01-21 15:01:25 Daniel

謝謝。我試圖在頁面加載時更改類，並且我不確定如何在頁面加載時但在導航欄代碼執行後默認運行腳本 –

根據本地存儲中的值更改類屬性

回答

相關問題