So legen Sie CSS3-Variablen in HTML-Tags und JS fest

Der Inhalt dieses Artikels befasst sich mit dem Festlegen von CSS3-Variablen in HTML-Tags und JS. Es hat einen bestimmten Referenzwert, auf den Sie sich beziehen können Ich hoffe, es wird Ihnen hilfreich sein.

1. Legen Sie die CSS-Variablen im HTML-Tag

wie folgt fest:

<div style="--color: #cd0000;">
<img  src="/static/imghw/default1.png"  data-src="mm.jpg"  class="lazy"     style="max-width:90%" alt="So legen Sie CSS3-Variablen in HTML-Tags und JS fest" >
</div>

Legen Sie sie einfach wie eine normale CSS-Anweisung im Style-Attribut fest.

Der Effekt ist wie folgt:

2. Stellen Sie die CSS-Variable

in JS wie folgt ein, die HTML-Darstellung:

< ;div id="box">

< /div>

Wenn Sie möchten, dass var (--color) wirksam wird, führen Sie den folgenden JavaScript-Code aus:

box.style.setProperty('--color' , '#cd0000' ; Sie können die Methode getPropertyValue() verwenden, um CSS-Variablen in JS zu erhalten, wie unten gezeigt:

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

4. Über CSS3 var()-Variablen

CSS3 var() Variablen sind eine gute Sache, als sie vor 2 Jahren eingeführt wurden. Noch nicht viele Browser unterstützen sie, aber jetzt wird sie auch von Edge16 vollständig unterstützt.

Das Obige ist eine vollständige Einführung zum Festlegen von CSS3-Variablen in HTML-Tags und JS. Wenn Sie mehr über das

CSS3-Tutorial

erfahren möchten, Bitte folgen Sie der chinesischen PHP-Website.

Das obige ist der detaillierte Inhalt vonSo legen Sie CSS3-Variablen in HTML-Tags und JS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!