.classList.toggleの.style.property値を上書きすると動作しない

Question

質問：.classList.toggleは、要素からCSSクラスを追加または削除します。それは素晴らしいですが、私は誰かが私の周りの方法を示すことができることを願って限界を遭遇したように見えます。

要素スタイルを設定するのにJavascriptを使用すると、.style.backgroundColor = "red"のように、classList.toggleを使用した次の行はこのスタイルを上書きできないようです。

詳細：以下のコードは完全に機能します。ウィンドウをクリックすると、背景色が赤から青に切り替わります。

window.addEventListener("click", myFunction); 
 
\t 
 
function myFunction(e) { 
 
    document.getElementsByClassName("box_1")[0].classList.toggle("color_swap"); 
 
}

.box_1 { 
 
\t height: 100px; 
 
\t background-color: red; 
 
\t transition: all .5s; 
 
} 
 

 
.color_swap { 
 
\t background-color: blue; 
 
\t transition: all .5s; 
 
}

<div class="box_1"></div>

しかし、私は遷移は、もはや作品JavaScriptを使用して背景色を設定し、一番上の行を追加したとき。

document.getElementsByClassName("box_1")[0].style.backgroundColor = "red"; 
 
\t 
 
window.addEventListener("click", myFunction); 
 
\t 
 
function myFunction(e) { 
 
    document.getElementsByClassName("box_1")[0].classList.toggle("color_swap"); 
 
}

.box_1 { 
 
\t height: 100px; 
 
\t background-color: red; 
 
\t transition: all .5s; 
 
} 
 

 
.color_swap { 
 
\t background-color: blue; 
 
\t transition: all .5s; 
 
}

<div class="box_1"></div>

この問題を回避する方法はありますか？ Javascriptでプロパティを設定できるようにしたいのですが、まだJavaScriptを使ってtoggle/add/removeクラスにすることができます。本当にありがとう！

Answer 1

はすでにbackground-color: red;です。JavaScriptでインラインスタイルを設定しないでください。

要素にインラインスタイルを追加すると、クラスのスタイルが上書きされます。特異性に関する文書を読む：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

!importantを使用して、それを無効にすることができます。

多分、あなたの混乱はスタイルの仕組みにあります。クラスをトグルしても、オブジェクトのプロパティとは異なり、要素のスタイルは設定されません。要素の最終的なスタイルは最終的には特異性に依存します。