Comment modifier le style en javascript

Méthode de modification : 1. Utilisez "element object.className" pour modifier le nom de classe de la feuille de style ; 2. Utilisez "element object.style.cssTest" pour modifier le style CSS intégré ; objet element. L'instruction "setAttribute()" modifie le style de l'élément en modifiant le fichier CSS externe.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

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 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 différence entre les méthodes ci-dessus.

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

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

Méthode 1. Utilisez obj.className pour modifier la classe du Nom de la feuille de style

À partir du code ci-dessous, vous pouvez voir comment ob.style.cssTest vient du style de btnB.

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

 }

Ce code modifie la couleur du texte de 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="inline>outline. Et le fond de btB. Le style de couleur de la pseudo-classe hove est écrit en ligne, donc la couleur d'arrière-plan intégrée couvre la pseudo-classe, ce qui empêche la couleur d'arrière-plan de changer lorsque la souris est placée sur btB

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] Le même, les défauts sont les mêmes.

Méthode 3 : Utiliser obj.setAttribute pour changer le fichier css du lien externe, changeant ainsi le css de l'élément

en changeant le css du lien externe. La référence du fichier permet de changer le style de btB. Le code est le suivant :

Il faut d'abord citer le fichier css externe. comme suit :

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>

function changeStyle4() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
 }

Cela peut aussi facilement changer le style de btB, je pense personnellement que cette méthode est la plus utile et la meilleure solution pour obtenir un skinning global de page

[Apprentissage recommandé : Tutoriel Javascript avancé]

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!