Comment définir les variables var CSS3 dans les balises HTML et JS

Le contenu de cet article explique comment définir les variables var CSS3 dans les balises HTML et JS. Il a une certaine valeur de référence pour les amis dans le besoin. j'espère que cela vous sera utile.

1. Définissez les variables CSS dans les balises HTML

comme suit :

<div style="--color: #cd0000;">
<img  src="/static/imghw/default1.png"  data-src="mm.jpg"  class="lazy"     style="max-width:90%" alt="Comment définir les variables var CSS3 dans les balises HTML et JS" >
</div>

Définissez-les simplement dans l'attribut style comme une instruction CSS normale.

L'effet est le suivant :

2 Définissez la variable CSS

dans JS comme suit, la représentation HTML : <🎜. >

< ;div id="box">

< /div>

Si vous souhaitez que var (--color) prenne effet, exécutez le code JavaScript suivant :

box.style.setProperty('--color' , '#cd0000' ; Vous pouvez utiliser la méthode getPropertyValue() pour obtenir des variables CSS dans JS, comme indiqué ci-dessous :

4. À propos des variables CSS3 var()

CSS3 var () les variables sont une bonne chose, introduites il y a 2 ans. À cette époque, peu de navigateurs la prenaient en charge, mais maintenant, Edge16 la prend entièrement en charge.

Ce qui précède est une introduction complète à la façon de définir les variables var CSS3 dans les balises HTML et JS. Si vous souhaitez en savoir plus sur le

Tutoriel CSS3

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

, veuillez suivre le site Web chinois PHP.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!