Recommander quatre exemples de codes de style CSS de modification javascript

Dans de nombreux cas, il est nécessaire de modifier dynamiquement les styles des éléments de la page Web. JavaScript propose plusieurs façons de modifier dynamiquement les styles. L'utilisation, les effets et les défauts des méthodes seront présentés ci-dessous.

1. Utilisez obj.className pour modifier le nom de classe de la feuille de style.

2. Utilisez obj.style.cssTest pour modifier le CSS intégré.

3. Utilisez obj.className pour modifier le nom de classe de la feuille de style.

4. Utilisez le fichier CSS externe pour modifier le CSS de l'élément

Ce qui suit est un morceau de code HTML et de code CSS pour expliquer la méthode ci-dessus différenciée. .

CSS

.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }

.style1:hover{ background-color:#66B3FF; cursor:pointer;}

.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }

.style2:hover{ background-color:black; color:White; cursor:pointer}

HTML

 <p>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <p id="tool">
   <input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
   <input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
   <input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
   <input type="button" value="更改外联css样式" onclick="recover()" />
  </p>
 </p>

Méthode 1. Utilisez obj.className pour modifier le nom de classe de la feuille de style

À partir du code ci-dessous, vous pouvez voir d'où vient ob.style.cssTest Le style de btnB.

 function changeStyle1() {
   var obj = document.getElementById("btnB");
   obj.style.backgroundColor= "black";

 }

Ce code modifie la couleur du texte btB. Ouvrez l'outil de débogage dans le navigateur et vous constaterez qu'il y a un attribut supplémentaire dans la balise btB [style. ="inside Inline > Outline. Le style de couleur d'arrière-plan de la pseudo-classe hove de btB est écrit en ligne, donc la couleur d'arrière-plan intégrée couvre la pseudo-classe, ce qui la rend invisible lorsque la souris est placée sur btB. Changement d'arrière-plan color.

Méthode 2 : Utilisez obj.style.cssTest pour modifier le CSS intégré

Téléchargez directement le code JavaScript :

 function changeStyle2() {
   var obj = document.getElementById("btnB");
   obj.style.cssText = "background-color:black; display:block;color:White;

}

L'effet de ce code est le même que dans [1], et les défauts sont les mêmes

Méthode 3. Utilisez obj.className pour modifier. it. Le nom de classe de la feuille de style

Utilisez du code pour modifier le nom de classe du style de référence btB, tel que le code suivant :

 function changeStyle3() {
   var obj = document.getElementById("btnB");
   //obj.className = "style2";
   obj.setAttribute("class", "style2");
 }

Changez le style en changeant le nom de la classe du CSS de btB. Il existe deux façons de changer le nom de la classe de style : 1. obj.className = "style2"; 2. obj.setAttribute("class"; , "style2"); les deux. Le même effet

Modifier le CSS de cette manière est bien meilleur que la méthode ci-dessus

Méthode 4 : Utiliser le fichier CSS externe pour modifier. le css

Changez le style de btB en changeant la référence du fichier css externe. L'opération est très simple :

Tout d'abord, vous devez référencer le fichier css externe. Le code est le suivant :

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!