既知のクラスの既知のクラスのcssプロパティをjavacript

Question

に変更します。
私は特定のcssクラスを持つHTML要素を持っています。 HTML要素自体に変更を加えることなく、その特定のクラスのプロパティの値を変更したいと思います。

HTMLコード：

<style> 
    .someClass{ 
     background-color:red; 
    } 

    span .someOtherClass { 
    background-color:blue; 
    } 
</style> 

<span class="someClass someOtherClass">some text</span> 

私は「.someClass」識別子 『は、背景色を：緑』がありますようにそれを行いますJSコードを探しています。

.cssオプションを使用するだけでなく、クラス自体を変更する理由は、.cssがHTML要素（インライン）のスタイルプロパティを変更するためです。ユースケースは、2番目のクラス（someOtherClass）がspan要素との間で動的に追加および削除される場所です。 「.someClass」クラスを持つ要素を変更するための.cssを使用してreasulting要素のインラインスタイルを変更します：

<span class="someClass someOtherClass" style="background-color:green;">some text</span> 

、これはspan要素から 『someOtherClass』を追加し、除去することが任意のを持っていないことを意味します影響を与える。

私はスパン要素からsomeClassを削除し、それに "background-color：green"という新しい動的生成クラスを置き換えることを考えましたが、もっとエレガントなものがあるのだろうかと思っていました。

ご協力いただければ幸いです。

Answer 1

、あなたは（どこでもスタイルシートで実際にまたは）スタイルシートの末尾にルールを追加するinsertRule()を使用することができます。

これは、1つまたは複数のまたは特定のクラスに関連付けられた宣言のすべてを変更することができます - この場合には、

background-color: greenへ

background-color: red

から.someClassの宣言を書き換えます。

実施例：

var span = document.getElementsByTagName('span')[0]; 
 
var toggleSomeOtherClass = document.getElementsByClassName('toggle-some-other-class')[0]; 
 
var changeSomeClass = document.getElementsByClassName('change-some-class')[0]; 
 
var backgroundColor = 'red'; 
 

 
function toggleClass() { 
 
\t span.classList.toggle('someOtherClass'); 
 
} 
 

 
function changeClass() { 
 
\t backgroundColor = (backgroundColor === 'red' ? 'green' : 'red'); 
 
\t document.styleSheets[0].insertRule('.someClass {background-color: ' + backgroundColor + ';}', document.styleSheets[0].cssRules.length); 
 
\t document.styleSheets[0].insertRule('.someOtherClass {background-color: blue;}', document.styleSheets[0].cssRules.length); 
 
} 
 

 
toggleSomeOtherClass.addEventListener('click', toggleClass, false); 
 
changeSomeClass.addEventListener('click', changeClass, false);

span { 
 
display: inline-block; 
 
width: 120px; 
 
height: 60px; 
 
line-height: 60px; 
 
color: rgb(255,255,255); 
 
font-weight: bold; 
 
text-align: center; 
 
} 
 

 
.someClass { 
 
background-color: red; 
 
} 
 

 
.someOtherClass { 
 
background-color: blue; 
 
}

<span class="someClass someOtherClass">some text</span> 
 

 
<button class="toggle-some-other-class" type="button">Toggle someOtherClass</button> 
 
<button class="change-some-class" type="button">Change someClass</button>

Answer 2

緑の色を表す新しいクラスを追加し、CSSルールを追加するだけです。その後、使用する方法に応じて元の.someClassを削除することができます。元のクラスのcolor属性を階層的に、またはより高い特異性で上書きする限り、削除するかどうかにかかわらず、新しいクラスは元のクラスよりも優先されます。 JavaScriptで

var someClass = document.getElementsByClassName('someClass')[0]; 
 
someClass.classList.add('green'); 
 
someClass.classList.remove('someClass'); // optional

.someClass { 
 
    color: red; 
 
} 
 
.green { 
 
    color: green; 
 
}

<span class="someClass">someclass</span>