Maison >interface Web >js tutoriel >Deux façons de changer le style CSS en js natif

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

迷茫original: 2017-03-26 16:58:471784parcourir

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>

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>

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des problèmes de conversion du type de données jsArticle suivant：Explication détaillée des problèmes de conversion du type de données js

Articles Liés

Voir plus