スタイルの色成分を変更することはできますか？

Question

は、次のように私はクラスを持っていると言う：

.X { 
    border:1px solid red; 
    background-color: blue; 
} 

は、他のすべての特性に影響を与えることなく、スクリプト、borderおよびまたはクラスXのbackground-colorの色を使用して、変更することは可能ですか？

Answer 1

他の人は、スタイル定義を変更することは可能だと言っていますが、本当にそれをしたいのですか？

.X.blue {background-color:blue;} 

Answer 2

これを達成するには、少しのJavaScriptを使用できます。

Answer 3

はい、実際には、JavascriptまたはjQueryを使用して要素のCSSプロパティを適切に変更できます。

document.getElementsByClassName("X")[0].style.border = "1px solid blue"; 

Javascriptの方法はHTMLElement.style propertyについては、こちらをご覧ください。

$(".X").css("border", "1px solid blue"); 

jQueryの方法はjQuery.css() methodについては、こちらをご覧ください。

Answer 4

ユースケース

// All elements with the class X 
 
const elX = document.querySelectorAll('.X'); 
 
elX.forEach(i => i.setAttribute("style", "color: green; border:solid tomato")); 
 

 
// First element with the class Y 
 
const elY = document.querySelector('.Y'); 
 
// All at once 
 
// elY.setAttribute("style", "color: tomato; border:solid tomato"); 
 

 
// Or you can set the styles individually 
 
elY.style.color = "tomato"; 
 
elY.style.border = "solid tomato";

<div class="X"> 
 
    <h1>Yo!</h1> 
 
</div> 
 

 
<div class="X"> 
 
    <h1>Yo!</h1> 
 
</div> 
 

 
<div class="Y"> 
 
    <h1>Yo!</h1> 
 
</div> 
 
<div class="Y"> 
 
    <h1>Yo!</h1> 
 
</div>

に依存：私はあなただけ別のクラス

$('.X').addClass('blue'); 

を追加することで、同じ結果を達成し、あなたのスタイルにこれを追加することができると思います