0

次の HTML があります。ブラウザは IE9 以降で、jQuery は使用していません。

<html class="darkBlue">

私がやりたいことは、HTML (以下) の 3 つのボタンを使用して、「darkBlue」、「black」、および「red」の色の間でクラスを切り替え、ユーザーがアクセスしたときにアプリケーションに最後の設定を記憶させることです。次回のページ。

HTML で次のように設定します。

<button>Blue</button>
<button>Black</button>
<button>Red</button>

切り替えを簡単にするにはどうすればよいですか？私は2つのことを考えていました：

  • クリックイベントで呼び出すことができる非常に小さなスクリプトがあります。
  • ボタンのクリック イベントですべてをコーディングしますか?

<html>これまでに学んだことは、次のようなものを選択する必要があるということです。

var elem = document.querySelector("html");

また、最後に選択した色を保存するために localstorage を使用できることも提案されました。アドバイスをいただければ幸いです。

4

3 に答える 3

0

それが役に立てば幸い。

Javascript

window.onload = function(){
    var theme = localStorage.getItem("theme");
    if(theme){
       document.getElementsByTagName("html")[0].className = theme ;
    }
}
    function setClass(){
        var html = document.getElementsByTagName("html")[0];
        document.getElementsByTagName("html")[0].className = this.name;
        localStorage.setItem("theme",this.name);
    };

getElementsBytagName ではなく、querySelector を使用したほうがよいでしょう。

html

<button name="dark" onclick="setClass()">Dark</button>
<button name="light" onclick="setClass()">Light</button>
于 2013-10-06T10:24:34.440 に答える