Maison  >  Article  >  interface Web  >  Comment modifier le CSS dans js

Comment modifier le CSS dans js

coldplay.xixi
coldplay.xixioriginal
2021-04-16 14:48:178825parcourir

Comment modifier le CSS avec js : 1. Utilisez [obj.style.cssTest] pour modifier le CSS intégré ; 2. Utilisez [bj.className] pour modifier le nom de classe de la feuille de style ; le changement du fichier CSS lié externe, modifiant ainsi le CSS de l'élément.

Comment modifier le CSS dans js

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

Méthode JS pour modifier le CSS :

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

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

Méthode 2 : Utilisez bj.className pour modifier 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, 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 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");

Modifier le CSS de cette manière est bien meilleur que ce qui précède.

Méthode 3 : Changer le css de l'élément en changeant le fichier css externe

Changer le style de btB en changeant la référence du fichier css externe, opération Très simple. Le code est le suivant :

Vous devez d'abord citer le 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");
 }

Recommandations du tutoriel associées : 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!

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