変更スタイルの前後に

Question

コード：

<style> .demo {color: yellow; background-color: purple} </style> 
<p class="demo">my text</p> 
<button id="change">click</button> 
<script> 
window.onload = function() { 
var flipColors = query("#change"); 
    var target = query(".demo"); 
    flipColors.onclick = function() { 
    style(target, "color", "white"); 
    style(target, "background-color", "black"); 
    }; 
}; 
</script> 

私はボタンをスタイルの変更]をクリックします。

ボタンを再度クリックするとJSに追加する必要があります。元のスタイルを復元し、再度クリックすると2つのボタンを作成するのではなく機能を再度アクティブにします。

.demoと.demo1のクラスを作成して切り替えることができますが、可能ならばその方法を理解したいと思います。

注：

は

window.onload = function() { 
    var flipColors = query("#change"); 
    var target = query(".demo"); 
    var clicked = false; 
    flipColors.onclick = function() { 
    if(clicked) { 
     style(target, "color", "yellow"); 
     style(target, "background-color", "purple"); 
    } else { 
     style(target, "color", "white"); 
     style(target, "background-color", "black"); 
    } 
    clicked = !clicked; 
    }; 
}; 

短いバージョン：

window.onload = function() { 
    var flipColors = query("#change"); 
    var target = query(".demo"); 
    var clicked = false; 
    flipColors.onclick = function() { 
    var color = clicked ? "yellow" : "white"; 
    var bgColor = clicked ? "purple" : "black"; 
    style(target, "color", color); 
    style(target, "background-color", bgColor); 
    clicked = !clicked;   
    }; 
}; 

Answer 1

うん、トグル（）はここでうまくいきます。私は2つのトグルクラスを作成しました.JavaScriptは最初は1つだけオンになり、その後2つの状態が切り替わります。

var flipColors = query("#change"); 
 
    var target = query(".demo"); 
 
    target.classList.add("demo-on"); 
 
    
 
    
 
    toggleClasses = function toggleClasses() { 
 
    target.classList.toggle("demo-on"); 
 
    target.classList.toggle('demo-off'); 
 
    };

.demo-off { 
 
    color: yellow; 
 
    background-color: purple; 
 
} 
 
.demo-on { 
 
    color: purple; 
 
    background-color: yellow; 
 
}

<p class="demo">my text</p> 
 
<button id="change" onclick="toggleClasses()">click</button>

ああ、しかし、あなたは実際のクラスが、CSS属性を切り替えるにはしたくないですか？簡単にやりました。試してみてください、この1：

var theToggle = document.getElementById("change"); 
 
var toggleMe = document.getElementsByClassName("demo")[0]; 
 
toggleMe.toggleStatus = "on"; 
 

 
theToggle.onclick = function(){ 
 
    switch(toggleMe.toggleStatus){ 
 
    case "on": 
 
     toggleMe.toggleStatus="off"; 
 
     toggleMe.style.color = "purple"; 
 
     toggleMe.style.backgroundColor = "yellow"; 
 
     break; 
 
    case "off": 
 
     toggleMe.toggleStatus="on"; 
 
     toggleMe.style.color = "yellow"; 
 
     toggleMe.style.backgroundColor = "purple"; 
 
     break; 
 
    } 
 
}

.demo { 
 
    width: 100px; 
 
    height: 100px; 
 
    color: yellow; 
 
    background-color: purple 
 
}

<p class="demo">my text</p> 
 
<button id="change">click</button>

これは純粋なJS、私が使用する状態をチェックするために使用するプロパティを追加しているが、あなたは同じように簡単にするために、switch文をオフに実行することができます例、toggleMe.style.color - これが役立つことを願っています！

Answer 2

はこのような何かを試してみてください"トグル"。各ユーザーのやりとり（クリックイベント）によって、アクティブから非アクティブに、そして行き来することが必要です。

Javascriptには、クラスでそれを処理する関数があります。例えば、次のコード行：

target.classList.toggle("active"); 

は、それが存在しないかどうオブジェクトtargetのクラスとして「アクティブ」を追加し、それが存在するかどうそれを除去するであろう。 HTML DOM classList Propertyの詳細はtoggleと他の方法です。

しかし、あなたはjQueryのソリューションを探していた場合には、同様の機能があります：

$(".class").toggleClass("active"); 

そして、ここでは.toggleClass() jQueryのメソッドのドキュメントですが。

Answer 3

私はあなたが探していると思う言葉があるだけで、プレーンJSではなく、jQueryのなど

Answer 4

あなたはjavascriptを

を使用してトグル動作を実現しようとしている場合は、次のコードスニペット

チェックこのスニペット

window.onload = function() { 
 
    var flipColors = document.querySelector("#change"); 
 
    var target = document.querySelector(".demo"); 
 
    flipColors.onclick = function() { 
 
    toggleStylechanges(target, "color", "white"); 
 
    toggleStylechanges(target, "backgroundColor", "black"); 
 
    }; 
 
} 
 

 
function toggleStylechanges(element, cssProp, color) { 
 
    if (element.style[cssProp] == "") 
 
    element.style[cssProp] = color; 
 
    else 
 
    element.style[cssProp] = ""; 
 
}

.demo { 
 
    color: yellow; 
 
    background-color: purple 
 
}

<p class="demo">my text</p> 
 
<button id="change">click</button>

はそれが

をホープとしてあなたが行うことができます