web-dev-qa-db-ja.com

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

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

次に例を示します。

.red{
    color:red;
}

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

.red{
    color:purple;
}

しかし、追加の方法で将来追加するすべての要素にこのルールを適用したいと考えています。したがって、CSSクラス.redでspanを追加する場合、テキストは赤ではなく紫である必要があります。

はっきりさせていただければ幸いです。

javascriptjquerycssdynamicstylesheet
23
Simon

あなたはjQuery .css() メソッドでそれを行います。

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

複数のルールの場合：

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

追加の方法で将来動的要素をDOMに追加するときは、それらの要素にclassまたはidを指定し、追加した後に上記のようなCSSルールを記述します。動的に作成されたすべての要素に適用されます。

作業サンプル

注意

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

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

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

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

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

作業サンプル

21
thecodeparadox

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

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

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

上記のリンクの例：

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

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

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

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

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

7
leewz