7

1 つのボタンで 2 つのスタイル シートを切り替えるコードを探しています。私は他の人の解決策を適応させようとしましたが、(まだ)役に立ちませんでした。これが私の最近の試みです：

設定：

<link id="style1" rel="stylesheet" type="text/css" href="resumecss.css" />
<script type="text/javascript">
function toggle() {
    var el = document.getElementById("style1");
    if (el.href == "resumecss.css") {
        el.href = "resumecssinvert.css";    
    }
    else {
        el.href = "resumecss.css";  
    }
}
</script>

呼び出し:

<button type="button" onclick="toggle()">Switch</button>

目的は、1 ページの 2 つのスキンを繰り返し切り替えることです。

親切/知識のある方、よろしくお願いします。

4

4 に答える 4

6

両方を含めてみてから、無効フラグを切り替えてください

<link id="style1" rel="stylesheet" type="text/css" href="resumecss.css" />
<link id="style2" rel="stylesheet" type="text/css" href="resumecssinvert.css" disabled="disabled"/>
<script type="text/javascript">
function toggle() {
    var el1 = document.getElementById("style1"),
        el2 = document.getElementById("style2");
    if( el1.disabled == "disabled" ) {
        el1.disabled = undefined;
        el2.disabled = "disabled";
    } else {
        el1.disabled = "disabled";
        el2.disabled = undefined;
    }
}
</script>
于 2013-08-21T21:57:13.347 に答える
5

これは私が考えることができる最短の解決策です (おそらくすべてのブラウザで動作します):

function toggle() {
  var a = document.getElementById("style1");
  a.x = 'resumecssinvert' == a.x ? 'resumecss' : 'resumecssinvert'; // short if
  a.href = a.x + '.css';
}

JavaScript ではすべてがオブジェクトであるため、単純にプロパティを追加できます。

デフォルトの css が「 resumecss」であると仮定すると、

初回xは設定せずに返すfalseので、「resumecssinvert」を設定します。

2回目の時刻xが設定されて戻りtrue、元に戻ります。すべてが正常に機能します。

于 2013-08-21T22:06:48.850 に答える
0

これはJqueryで動作します。

$('#dark-css').click(function() {

    var isDarkCss = $("link[href='dark.css']");

    if (isDarkCss.length){
        isDarkCss.remove();
    }else{
        $('head').append('<link type="text/css" rel="stylesheet" media="all" href="dark.css">');
    }
});
于 2016-07-28T12:31:57.103 に答える