javascript - JavaScriptまたはjQueryでCSSルールを動的に変更する

Question

ドキュメントにインポートされたスタイルシートのCSSルールを変更する方法を探しています。したがって、外部スタイルシートといくつかclassのdiv属性が内部にあります。JavaScriptまたはjQueryでルールの1つを変更したい。

次に例を示します。

.red{
    color:red;
}

つまり、JavaScriptで何かを行うというアイデアであり、HTMLは、colorこれが次のような別の色であることを認識しています。

.red{
    color:purple;
}

ただし、今後追加するすべての要素にこのルールを追加したいと思います。したがってspan、CSSクラス.redでを追加する場合、テキストは赤ではなく紫である必要があります。

はっきりさせておきたいと思います。

score 23 · Accepted Answer

スタイル宣言をDOMに挿入できます。

$("head").append('<style>.red { color: purple }</style>');

score 20 · Accepted Answer

それを行うにはjQuery.css()メソッドです。

$('.red').css('color', 'purple');

複数のルールの場合：

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

class将来、動的要素を追加によってDOMに追加する場合は、それらの要素にいくつかを与えるか、追加後に上記のようなルールidを記述するだけで、動的に作成されたすべての要素に適用されます。CSS

作業サンプル

私の見解では、動的ルールを追加することは良い解決策ではありません。代わりに、外部CSSファイルをロードできます。

ただし、動的ルールのようなものが必要な場合は、メソッドを追加します。

$('head').append(
  $('<style/>', {
    id: 'mystyle',
    html: '.red {color: purple }'
  })
);

そして将来の使用のために：

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

score 9 · Accepted Answer

ルールを追加する場合は、各要素のスタイルを直接編集する代わりに、を使用できますCSSStyleSheet.insertRule()。文字列としてのルールと、ルールを挿入する場所の2つのパラメーターを取ります。

上記のリンクからの例：

// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);

この場合、myStyleは要素の.sheetメンバーです。style

私の知る限りstyle、シートを取得する前に要素をドキュメントに挿入する必要があり、外部シートにすることはできません。document.styleSheetsからシートを取得することもできます。

var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);

注：このページでは、ルールを変更するのではなく、クラスを変更して要素を変更することをお勧めします。