Maison > Article > interface Web > Comment modifier le CSS en js natif
Comment modifier le CSS en js natif
- 醉折花枝作酒筹original
- 2021-07-23 10:20:083514parcourir
Les méthodes sont : 1. Via node.style.cssText="css expression 1; css expression 2; css expression 3"; 2. Définissez d'abord le style d'une classe spécifique dans la feuille de style CSS, puis transmettez le nœud. classname="class name" attache le paramètre de style de la classe au nœud node.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Maintenant, je vais vous présenter deux façons de changer le style CSS en js natif :
1By node.style.cssText="css expression 1; css expression 2; dans le code javascript; css expression 3" change directement le style CSS.
2Définissez d'abord le style d'une classe spécifique telle que "classe active" dans la feuille de style CSS (la classe active ici est supposée et n'existe pas pour le moment), puis transmettez node.classname=" active" dans le code javascript " provoque l'attachement du paramètre de style de la classe active dans la feuille de style CSS au nœud du nœud.
Ce qui suit est une introduction détaillée, le premier est le code html :
<style type="text/css">
div {
float: left;
padding: 20px;
margin: 10px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.active
{
background-color:blue
}
</style>
<body>
<div class="root">
</div>
</body>Utilisez d'abord la première méthode mentionnée ci-dessus pour changer le style CSS, écrivez le code javascript suivant :
<script type="text/javascript">
var root=document.getElementsByClassName("root")[0];
root.style.cssText="background-color: blue;color: #fff;";
</script>Le résultat en cours d'exécution est :
Utilisez ensuite la deuxième méthode mentionnée ci-dessus pour changer le style CSS et écrivez le code javascript suivant :
<script type="text/javascript">
var root=document.getElementsByClassName("root")[0];
root.className="active";</script>Le même résultat d'exécution est :
Résumé : Les résultats de ces deux méthodes sont les mêmes, mais en termes de le processus opérationnel, La deuxième méthode, la méthode "node.classname", sépare l'écriture de css et de js, ce qui est évidemment plus raisonnable et ordonné. Si l'instruction CSS est relativement simple, il n'y a pas de différence entre les deux méthodes, mais si l'instruction CSS est relativement complexe, la deuxième méthode est évidemment plus méthodique.
Apprentissage recommandé : Tutoriel vidéo CSS
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!