HTMLタグとJSでCSS3 var変数を設定する方法

この記事の内容は、HTML タグや JS に CSS3 の var 変数を設定する方法についてです。必要な方は参考にしてください。参考になれば幸いです。

1. HTML タグ

に CSS 変数を次のように設定します。

<div style="--color: #cd0000;">
<img  src="/static/imghw/default1.png"  data-src="mm.jpg"  class="lazy"     style="max-width:90%" alt="HTMLタグとJSでCSS3 var変数を設定する方法" >
</div>

通常の CSS ステートメントと同様に、style 属性に設定するだけです。

結果は次のとおりです:

2. JS

で CSS 変数を次のように設定します。HTML 表現:

< ;div id="box">

< /div>

var (--color) を有効にするには、次の JavaScript コードを実行します:

box.style.setProperty('--color', ' #cd0000' );

つまり、setProperty() メソッドを使用すると、次のような効果が得られます (GIF スクリーンショット:

3)。 JS

以下に示すように、getPropertyValue() メソッドを使用して JS で CSS 変数を取得できます。

// 获取 --color CSS 变量值
var cssVarColor = getComputedStyle（box）。getPropertyValue（'--color'）；
// 输出cssVarColor
// 输出变量值是：#cd0000
console.log（cssVarColor）；

4. CSS3 var() 変数について

CSS3 var( ) 変数は 2 年前に導入されたときは良いもので、まだ多くのブラウザーがそれをサポートしていませんでしたが、現在では Edge16 も完全にサポートしています。

上記は、HTML タグと JS で CSS3 var 変数を設定する方法の紹介です。CSS3 チュートリアル について詳しく知りたい場合は、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。

以上がHTMLタグとJSでCSS3 var変数を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。