Comment modifier le style CSS avec js

Comment modifier le style CSS dans js : 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é ; Utilisez [ obj.className] pour modifier le nom de classe de la feuille de style 4. Utilisez CSS qui modifie le lien externe.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Méthode JS pour modifier le style CSS :

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.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. Utilisez obj.className pour modifier le nom de classe de la feuille de style.

Utilisez le code pour modifier le nom de classe de la. 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 le CSS de cette manière est bien meilleur que la méthode ci-dessus. Méthode 4. Utilisez change. Le fichier css lié change le css de l'élément

pour changer le style de btB en changeant la référence du fichier css lié. Le code est le suivant : .

doit être cité en premier. Fichier css externe, 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");
 }

Tutoriels associés recommandés :

Tutoriel vidéo CSS

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!