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

Comment modifier le CSS dans js

coldplay.xixi
Libérer: 2023-01-05 16:09:13
original
8869 Les gens l'ont consulté

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;
 
}
Copier après la connexion

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");
}
Copier après la connexion

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");
 }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal