Maison >interface Web >tutoriel CSS >Comment définir les variables var CSS3 dans les balises HTML et JS

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

云罗郡主
云罗郡主avant
2018-11-27 17:10:223922parcourir


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="mm.jpg"   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 :

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

2 Définissez la variable CSS

dans JS comme suit, la représentation HTML :

< ;div id="box">

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

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. Comment définir les variables var CSS3 dans les balises HTML et JS

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(&#39;--color&#39;);
// 输出cssVarColor
// 输出变量值是:#cd0000
console.log(cssVarColor);
, veuillez suivre le site Web chinois PHP.

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

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer