2つのボタンを1つに切り替える（トグル）

Question

2つのボタンのうち1つをクリックした後に2つの異なる外部の.cssを切り替えるこのコードはありますが、変更する必要があります。 2つの.cssファイル。

<script type="text/javascript"> 

    function changeCSS(cssFile, cssLinkIndex) { 

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex); 

    var newlink = document.createElement("link") 
    newlink.setAttribute("rel", "stylesheet"); 
    newlink.setAttribute("type", "text/css"); 
    newlink.setAttribute("href", cssFile); 

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink); 
    } 
</script> 

<a href="#" onclick="changeCSS('css/main.css', 1);">STYLE 1</a> 
<a href="#" onclick="changeCSS('css/main2.css', 1);">STYLE 2</a> 
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

Answer 1

var cssFiles = ['css/main.css', 'css/main2.css']; 
var currentFile = 0; 

function changeCSS(cssLinkIndex) { 

    if(currentFile + 1 < cssFiles.length) currentFile++; 
    else currentFile = 0; 

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex); 

    var newlink = document.createElement("link") 
    newlink.setAttribute("rel", "stylesheet"); 
    newlink.setAttribute("type", "text/css"); 
    newlink.setAttribute("href", cssFiles[currentFile]); 

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink); 
} 

あなたのスタイルシート。カウンタが最大値に達すると、カウンタは0にラップして再び開始します。

Answer 2

これを行うには、現在ロードされているスタイルを識別できるフラグが必要です。たとえば、ボタンにいくつかのクラスを追加し、このクラスに基づいて異なるスタイルをロードすることができます。クリックごとに、そのフラグを更新して実際の状態を最新のものにする必要があります。

<a href="#" onclick="changeCSS(1);">CHANGE STYLE</a> 

それは単にの名前を含む配列の異なる指標を指すように、ボタンがクリックされるたびにインクリメントされるカウンタを維持して：あなたはこのようにそれを呼び出すことができます

Answer 3

あなたはこのように気にいらを行うことができます：

<script type="text/javascript"> 

    var cssFile = "css/main.css"; 

    function changeCSS(cssLinkIndex) { 

    if (cssFile == "css/main.css") 
     cssFile = "css/main2.css"; 
    else 
     cssFile = "css/main.css"; 

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex); 

    var newlink = document.createElement("link") 
    newlink.setAttribute("rel", "stylesheet"); 
    newlink.setAttribute("type", "text/css"); 
    newlink.setAttribute("href", cssFile); 

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink); 
    } 
</script> 

<a href="#" onclick="changeCSS(1);">STYLE 1</a> 
<a href="#" onclick="changeCSS(1);">STYLE 2</a> 
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

Answer 4

このような何かが働くだろう：

<script type="text/javascript"> 

var CSSToggle = false; 

function changeCSS(cssLinkIndex) { 

    CSSToggle = !CSSToggle; 
    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex); 

    var newlink = document.createElement("link") 
    newlink.setAttribute("rel", "stylesheet"); 
    newlink.setAttribute("type", "text/css"); 

    If(CSSToggle){ 
     cssFile = "main.css"; 
    } else { 
     cssFile = "main2.css"; 
    } 

    newlink.setAttribute("href", cssFile); 

    document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink); 
} 
</script> 

<a href="#" onclick="changeCSS(1);">Toggle styles</a> 
<div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> 

しかし、CSSファイルを切り替えるクリーナーの方法があります。たとえば、あなたはそうのように、単一のCSSファイルを使用することができます。

body.styles1 div.box { //styles here } 
body.styles2 div.box { //styles here } 

あなたは切り替えたいときに、styles1またはstyles2に身体クラスを変更します。少数のHTTP要求（CSSを少し膨らませているにもかかわらず）とDOM操作が少なくなります。