Comment modifier dynamiquement une feuille de style CSS avec JavaScript-js tutoriel-php.cn

Comment modifier dynamiquement une feuille de style CSS avec JavaScript

不言

Libérer： 2018-12-05 09:45:47

original

2872 Les gens l'ont consulté

Comment changer dynamiquement les classes CSS (feuilles de style) avec JavaScript ? Pour modifier un nom de classe en JavaScript, vous devez modifier l'attribut className de l'élément. Cet article présentera le code permettant de modifier dynamiquement les classes CSS (feuille de style) à l'aide de JavaScript.

Comment modifier dynamiquement une feuille de style CSS avec JavaScript

Regardons directement un exemple

Créez le fichier HTML suivant.

JavaScriptChangeCssClass.html

<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function buttonClick() {
            target = document.getElementById("important");            
if (target != null) {
                target.className = "importantText";
            }
        }    
</script>
    <link rel="stylesheet" type="text/css" href="JavaScriptChangeCssClass.css"/>
</head>
<body>
    <p>这篇文章是很<span id="important">重要</span>的，需要特别注意。</p>
    <input id="Button1" type="button" value="button" onclick="buttonClick();"/>
</body>
</html>

Copier après la connexion

JavaScriptChangeCssClass.css

.importantText{
   font-weight:700;   
   color:#FF0000;
   }

Copier après la connexion

Description :

Cliquez sur le bouton et la section de code suivante sera exécutée

function buttonClick() {
    target = document.getElementById("important");    
if (target != null) {
      target.className = "importantText";
    }
  }

Copier après la connexion

 target = document.getElementById("important");

Copier après la connexion

Par conséquent, la pièce d'identité obtient l'élément important. Dans ce cas, vous pouvez obtenir l'élément avec "important".

 if (target != null) {
    target.className = "importantText";
  }

Copier après la connexion

Si l'élément peut être obtenu, il s'agit d'une valeur non nulle, donc la partie interne de l'instruction if est exécutée. Vous pouvez définir la classe d'un élément en attribuant l'attribut className. Dans cet exemple, « importantText » est défini sur le nom de la classe.

Le statut est modifié en fonction de ce traitement

  <span id="important" class="importantText">重要</span>

Copier après la connexion

Résultats en cours d'exécution

Utilisez un navigateur Web pour afficher le fichier HTML ci-dessus. L'effet illustré ci-dessous sera affiché.

Comment modifier dynamiquement une feuille de style CSS avec JavaScript

Cliquez sur le bouton "bouton", l'effet suivant sera affiché, "Important" change en police rouge

Comment modifier dynamiquement une feuille de style CSS avec JavaScript

Ce qui précède représente l'intégralité du contenu de cet article. Pour un contenu plus intéressant, vous pouvez consulter la colonne Tutoriel vidéo JavaScript sur le site Web php chinois pour en savoir plus ! ! !

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!