Maison > interface Web > js tutoriel > le corps du texte

Comment modifier le CSS en javascript

藏色散人
Libérer: 2023-01-04 09:35:12
original
3056 Les gens l'ont consulté

Comment modifier le CSS en JavaScript : 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é ; modifier la classe de la feuille de style Nom ; 4. Utilisez le fichier CSS externe pour modifier le CSS.

Comment modifier le CSS en javascript

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

Un résumé des méthodes JavaScript pour modifier dynamiquement les styles CSS (quatre méthodes)

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.cssTest 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 méthode ci-dessus différenciée. .

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

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

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";

 }
Copier après la connexion

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;

}
Copier après la connexion

Ce code est le même que dans [1] L'effet est le même, et 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 btB. Référencez le nom de classe du style, comme 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 classe du css de btB. Il existe deux façons de changer le nom de classe de style : 1. obj.className = "style2"; 2. obj.setAttribute("class", "style2");

Modifier le CSS de cette manière est bien meilleur que la méthode ci-dessus : modifier le CSS de l'élément. en changeant le fichier css externe

Changez le style de btB en changeant la référence du fichier css externe Le code est le suivant : Tout d'abord, vous devez 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

Cela peut aussi facilement changer le style de btB. Je pense personnellement que cette méthode est la meilleure à utiliser pour obtenir le changement global de l'apparence de la 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!

É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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!