Comment modifier le CSS en js natif-tutoriel CSS-php.cn

Comment modifier le CSS en js natif

醉折花枝作酒筹

Libérer： 2023-01-07 11:45:18

original

3549 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

Le résultat en cours d'exécution est :

Comment modifier le CSS en js natif

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>

Copier après la connexion

Le même résultat d'exécution est :

Comment modifier le CSS en js natif

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!