Comment remplacer le style CSS par js

Comment remplacer le style CSS par js : 1. Utilisez obj.className pour modifier le nom de classe de la feuille de style ; 2. Utilisez obj.style.cssText pour modifier le CSS intégré 3. Utilisez obj.className pour modifier la classe ; du nom de la feuille de style ; 4. Modifiez le fichier CSS externe.

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

Comment remplacer le style CSS par js ?

Résumé javascript des méthodes de modification dynamique du style CSS - quatre méthodes

Afin d'obtenir un certain effet spécial, nous devons utiliser Javascript pour modifier dynamiquement l'attribut CSS d'une certaine balise. Comment modifier dynamiquement le CSS. style? Face à ce problème, l'éditeur vous amènera à résoudre le problème de la modification dynamique des styles CSS avec JavaScript. Amis, venez apprendre

Dans de nombreux cas, il est nécessaire de modifier dynamiquement les styles des éléments sur les pages 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.cssText 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 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

<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 comment ob.style.cssText vient du style 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 la pseudo-classe hove de btB L'arrière-plan. -color style 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 cssText 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 la classe de la feuille de style. Nom

Utilisez le code pour modifier le nom de classe du style de référence btB, comme indiqué dans 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 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");
ont tous le même effet
Modifier CSS de cette manière est bien meilleur que la méthode ci-dessus

Méthode 4. .Utilisez les modifications. Fichier css externe, changeant ainsi le css de l'élément

Il est très simple de changer le style de btB en changeant la référence du fichier css externe. Le code est le suivant :
Tout d'abord, vous devez référencer le css externe. fichier, le code est le suivant :

<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. Personnellement, je pense que cette méthode est la plus utile et la meilleure façon d'obtenir un skinning global de page

[Apprentissage recommandé : JavaScript de base. Tutoriel]

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!