jsで要素のスタイルを設定する手順を詳しく解説

今回は、jsで要素のスタイルを設定する手順について詳しく説明します。 jsで要素のスタイルを設定する際の注意点は何ですか。実際のケースを見てみましょう。

js を開発するときに要素のスタイルを設定する方法がわからない人はたくさんいます。この記事では、誰もが js の設定方法をよりよく理解できるように、js の設定方法を説明します。興味がある場合は、見てみましょう。見て。

このタイトルを見ると、「[要素].style.[css属性名] = [属性値]」のようなルーチンを使って要素のスタイルを設定するのが真っ先に思い浮かぶかもしれませんが、実際には、他の方法を選択してください。

次に、要素をスタイル設定する 3 つの方法について詳しく説明します。

1.スタイル

これは実際には私たちがよく知っている方法です、例えば~~

<p id="box"></p>

rreee この方法は単純で大雑把に見えますが、特に多くのスタイルを追加する必要がある場合、その書き方は非常に面倒です。また、ダッシュを使用した CSS プロパティ名はキャメルケースに変換する必要があることに注意してください。 (例のbackgroundColorのように)

2.style.cssText

この方法は上記の方法よりも簡潔で、要素に CSS を直接記述することに似ています:

[要素].style.cssText = [CSS スタイル];

例:

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";

確かに、この書き方は非常に便利です。

ただし、この方法で後から追加したスタイルによって、以前に style 属性で指定したスタイルが上書きされるという欠点があります。

上記と同じ例ですが、2 つの JS が一緒に書かれています:

box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

カスケード スタイル シートの特性に従っている場合、上で定義した赤い背景色は引き続き存在するはずですが、実際には、style.cssText メソッドを通じて以下に定義されたスタイルは、そのスタイルを通じて追加されたすべてのスタイル (style.cssText を含む) をオーバーライドします。 ） 方法。したがって、この例の最終的なパフォーマンス結果は、文が 1 つしかない場合と同じになります。最後に、IE8 以前のバージョンは cssText をサポートしていません。

3.insertRule()

この使用法は、上記の 2 つの方法よりも複雑です:

[シート].insertRule([CSSスタイル], 指定位置)

[sheet] はスタイル シートを表し、document.styleSheets を通じて取得できます。では、document.styleSheets とは何でしょうか? 簡単に言うと、リンク タグによって導入されたスタイルやスタイル タグによって定義されたスタイルなど、ドキュメントに適用されるすべてのスタイル シートを意味します。まだ少しわかりにくい場合は、例を挙げてみましょう~~

まずヘッダーにスタイルシートを導入します:

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

もちろん、このスタイルシートは実際に存在する必要があり、スタイルシートが書かれていなくても問題ありません。 style タグを直接使用することもでき、コンテンツが空であっても問題ありません。

次に、JS を使用してこのスタイル シートを取得します:

<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />

最後に、このスタイルシートにスタイルを追加できます:

var sheet = document.styleSheets[0];

サイズは 200*200 のままで、背景色は緑色です。これは、style.cssText で設定された幅と高さのスタイルが、insertRule() で設定されたスタイルを上書きすることを意味します。その理由は非常に簡単です。 style.cssText) に属するインライン スタイルは、当然ながら、insertRule() で設定されたスタイルよりも優先度が高くなります

~~

では、この例の insertRule() の 2 番目のパラメーター 0 は何を指すのでしょうか? これは CSS コードを追加する必要がある場所を参照するため、パラメーター 0 はスタイル シートの先頭を表します。

たとえば、最初に手動でスタイル シートにスタイルを追加します (次の例は上記の例とは関係ありません):

sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

<style>
  #box{ width: 100px; height: 100px;}
</style>

上記の実行の結果は、幅と高さが 100*100 の緑色のボックスです:

insertRule() の 2 番目のパラメーターを 1 に変更すると、JS を通じて追加された CSS コードは、次のように #box{ width: 100px; height: 100px;} の後ろに追加されるのと同じになります。 insertRule() は IE8 以前のバージョンと互換性がないことにも注意してください。ただし、代わりに addRule() を使用できます。上記の例は次のように記述されています。

コードをコピーします

コードは次のとおりです:

	sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);	

第一个参数代表元素，第二个参数代表CSS样式，第三个参数代表插入位置，前两个参数必选，最后一个可选，不填则默认为0。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

以上がjsで要素のスタイルを設定する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。