Deux façons de changer le style CSS en js natif-js tutoriel-php.cn

Deux façons de changer le style CSS en js natif

迷茫

Libérer： 2017-03-26 16:58:47

original

1742 Les gens l'ont consulté

Ci-dessous, je vais vous présenter deux façons de modifier les styles CSS en js natif :

1 Via le nœud dans le style javascript. .cssText="css expression 1; css expression 2; css expression 3" pour changer directement le style CSS.

2Définissez d'abord le style d'une classe spécifique telle que la "classe active" dans la feuille de style CSS (la classe active ici est supposée et n'existe pas pour le moment), puis dans le code javascript Via node.classname="active", le paramètre de style de la classe active dans la feuille de style CSS est attaché 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">
           p {
			float: left;
			padding: 20px;
			margin: 10px;
			border: 1px solid #000;
			background-color: #fff;
			color: #000;
		}
           .active
                {
                       background-color:blue
                }
</style>
<body>
      <p class="root">
      </p>
</body>

Copier après la connexion

est juste un simple p, le résultat courant est

Utilisez d'abord ce qui précède. La première façon de changer le style CSS est d'écrire 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 :

Ensuite utilisez ce qui précède La deuxième façon de changer le style CSS est d'écrire 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 en cours d'exécution est :

Résumé : ces deux Les résultats des deux méthodes sont les mêmes, mais en ce qui concerne le processus opérationnel, la deuxième méthode, qui est la méthode "node.classname", sépare l'écriture de css et 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.

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!