CSS DOM の動的スタイル設定

CSS DOM動的スタイル

• CSSの各属性をJSで操作します。

• JS はインライン スタイルの操作または変更のみ可能です。例: imgObj.style.border = “1px ソリッドレッド”

• クラススタイルの場合、className を通じて値を割り当てます。例: imgObj.className = "imgClass"

style object

• 各 HTML タグには style 属性があります。ただし、この style 属性は style オブジェクトでもあります。

• それでは、このスタイル オブジェクトの属性は何でしょうか?スタイル オブジェクトの属性は、CSS の属性と 1 対 1 で対応します。

• したがって、CSSの代わりにスタイルオブジェクトが使用されます。

• 例: imgObj.style.border = "1px Solid red";

スタイルオブジェクト属性とCSS属性の変換

• の場合それは言葉です、CSS プロパティのようなスタイル オブジェクト プロパティ。

• 複数の単語がある場合、最初の単語はすべて小文字にし、後続の各単語の最初の文字を大文字にし、アンダースコアを削除する必要があります。

• divObj.style.backgroundColor = “赤”;

• divObj.style.backgroundImage = “url(images/bg.gfi)”;

• divObj.style.fontSize = “18px” ;

りー