1

私は次のHTMLを持っています:

<button class="Blue" id="theme" onclick="setThemeColor(this)">#</button>

そして、次の機能:

function setThemeColor(button) {
    localStorage.themeColor = // I need to set it here but I am not sure how
                              // if the class is Blue it needs to be Black
                              // if the class is Black it needs to be Blue
    document.getElementsByTagName('html')[0].className = // 
    // I need to change the button class 
}

どうすればそうすることができますか:

  • ボタン クラスが Blue の場合、クリックするとクラスが Black に変更され、html クラス名が Blue に変更されます。
  • ボタン クラスが Black の場合、クリックするとクラスが Blue に変更され、html クラス名が Black に変更されます。
4

3 に答える 3

1

私はお勧めします:

function setThemeColor(button) {
    /* toggling between blue and black, means the className of the 'html'
       element should be whatever the button's className was: */
    document.getElementsByTagName('html')[0].className = button.className;

    // changing the class to 'black' if it was 'blue', and to 'blue' if it wasn't:
    button.className = button.className.indexOf('blue') === -1 ? 'blue' : 'black';

    // setting the localStorage:
    localStorage.themeColor = button.className.indexOf('blue') === -1 ? 'blue' : 'black';
}

JS フィドルのデモ

于 2013-10-21T16:11:13.783 に答える
1

これを試して:

var colors = ["Black", "Blue"];

function setThemeColor(button) {
    localStorage.themeColor = colors[(colors.indexOf(button.className) + 1) % colors.length];
    document.getElementsByTagName("html")[0].className = localStorage.themeColor;
    button.className = localStorage.themeColor; //by the way you shouldn't need this if you did this more effectively in CSS
}

ただし、実際にはボタンにクラスを配置する必要はありません。テーマに対して行うべきことは、HTMLタグにクラスを設定することです.cssがカスケードするため、接頭辞を持つスタイルを適用します. 例えば:

 html.blue button { color: blue }

したがって、コードは次のようになります。

var colors = ["Black", "Blue"];

function setThemeColor(button) {
    var html = document.documentElement;
    var newColor = colors[(colors.indexOf(html.className) + 1) % colors.length];
    localStorage.themeColor = newColor;
    html.className = newColor; 
}

また、私のコードでは(他のコードとは異なり)色を追加したい場合は、それを配列に追加するだけです。もう 1 つの方法は、ある色から別の色への移行を処理するために、多数の if/else を入れ始める必要があります。

于 2013-10-21T16:10:16.797 に答える
1
function setThemeColor(button) {
    var newColor = button.className == "Blue" ? "Black" : "Blue";
    localStorage.themeColor = newColor;
    document.getElementsByTagName('html')[0].className = newColor;
}
于 2013-10-21T16:10:30.103 に答える