JavaScriptを使用して1つのdivをクリックしてCSSスタイルシートファイルを循環させる

ページをリロードせずにCSSスタイルシートファイルを交換したい。私は、単一のソース（div、#button）をクリックして、デフォルトに戻ってから、リストを繰り返しループすることで、複数のスタイルシートの配列をどのように循環させるのだろうかと思います。これは必須ではありませんが、ブラウザがページ間の連続性のために現在どのスタイルシートを使用しているかを覚えていれば素晴らしいでしょう。以下は、私がこれまで持っているものであるJavaScriptを使用して1つのdivをクリックしてCSSスタイルシートファイルを循環させる

HTML：

<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css"> 

<div id="button" style="width: 100px; height: 100px; background-color: red;"></div>

Javascriptを：そのスタイルシートのリストをシャッフルし、最初にレンダリングするだろう行うに

var stylesheets = [ 
    "style1.css", 
    "style2.css", 
    "style3.css", 
    "default.css" 
]; 

function swapStyleSheet(sheet){ 
    document.getElementById('pagestyle').setAttribute('href', sheet); 
}

出典

2017-01-05 user3106225

それはまったく機能しますか？ –

いいえ、ボタンdivにswapStyleSheetを有効にする関数はありません – user3106225

[代替のスタイルシート]（https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets）をご覧ください。 –

一つの方法毎回1つ：

function nextSytlesheet() { 
    stylesheets.push(stylesheets.shift()); 
    swapStyleSheet(stylesheets[0]); 
}

しかし、スタイルをリロードすることで何を達成しようとしていますか？すべてのCSSファイルはサーバーへのGETリクエストを開始するので、スタイルが巨大でなければ、アプリごとに1つのスタイルシートを持ち、代わりにクラスを動的に切り替える方が理にかなっています。スタイルシートの完全なスワップをシミュレートするには、style1.cssにあるすべてのルールに.style1（末尾のスペースを含む）クラスを追加してから、他のスタイルに対して同じ処理を行い、スタイルシートをリロードせずに<body>に切り替えます。

出典

2017-01-05 04:50:04

あなたの目的はわかりませんが、ボタンを使用してページ上の要素のクラス名を変更し、メインスタイルシートのクラスに関連するさまざまなスタイルを持つことができます。

希望すると便利です。 ;）

編集：イゴールと同じように言った。私は今まで彼の全面的なコメントを見ていなかった。

編集2：遅れて申し訳ありませんが、私はあなたのデモを行うことができました！

HTML：

<div id="fakeBody" class="normal"> 
    <p>Hello There! I change colors!</p> 
    <button id="button">Click me to change colors</button> 
</div>

CSS：

.normal, button { 
    color: default; 
    background-color: default; 
} 
.light, .light button { 
    color: #0000ff; 
    background-color: #ffffff; 
} 
.dark, .dark button { 
    color: #ffffff; 
    background-color: #000000; 
} 
.wood, .wood button { 
    color: #444444; 
    background-color: #dbcc48; 
} 
.textEditor, .textEditor button { 
    color: #00ff00; 
    background-color: #000000; 
}

Javascriptを：

var body = document.getElementById("fakeBody"), 
     themePosition = 0, 
    maxThemePosition = 4; 
document.getElementById("button").addEventListener("click", function(){ 
    themePosition++; 
    if (themePosition > maxThemePosition) { 
    themePosition = 0; 
    } 
    if (themePosition == 0) { 
     body.className = "normal"; 
    } else if (themePosition == 1) { 
    body.className = "light"; 
    } else if (themePosition == 2) { 
    body.className = "dark"; 
    } else if (themePosition == 3) { 
    body.className = "wood"; 
    } else if (themePosition == 4) { 
    body.className = "textEditor"; 
    } 
});

Working Jsfiddle

出典

2017-01-05 05:03:02

JavaScriptを使用して1つのdivをクリックしてCSSスタイルシートファイルを循環させる

答えて

関連する問題