So ändern Sie ein CSS-Stylesheet dynamisch mit JavaScript-js-Tutorial-php.cn

So ändern Sie ein CSS-Stylesheet dynamisch mit JavaScript

不言

Freigeben： 2018-12-05 09:45:47

Original

2908 Leute haben es durchsucht

Wie ändere ich CSS-Klassen (Stylesheets) dynamisch mit JavaScript? Um einen Klassennamen in JavaScript zu ändern, müssen Sie das className-Attribut des Elements ändern. In diesem Artikel wird der Code zum dynamischen Ändern von CSS-Klassen (Stylesheets) mithilfe von JavaScript vorgestellt.

So ändern Sie ein CSS-Stylesheet dynamisch mit JavaScript

Schauen wir uns direkt ein Beispiel an

Erstellen Sie die folgende HTML-Datei.

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>

Nach dem Login kopieren

JavaScriptChangeCssClass.css

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

Nach dem Login kopieren

Beschreibung:

Klicken Sie auf die Schaltfläche und der folgende Codeteil wird ausgeführt

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

Nach dem Login kopieren

 target = document.getElementById("important");

Nach dem Login kopieren

Daher wird die ID des Elements wichtig. In diesem Fall können Sie das Element mit „important“ erhalten.

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

Nach dem Login kopieren

Wenn das Element abgerufen werden kann, handelt es sich um einen Nicht-Null-Wert, sodass der innere Teil der if-Anweisung ausgeführt wird. Sie können die Klasse eines Elements festlegen, indem Sie das Attribut className zuweisen. In diesem Beispiel wird „importantText“ auf den Klassennamen gesetzt.

Laut dieser Verarbeitung

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

Nach dem Login kopieren

hat sich der Status geändert.

Laufergebnisse

Verwenden Sie einen Webbrowser, um die obige HTML-Datei anzuzeigen. Der unten gezeigte Effekt wird angezeigt.

So ändern Sie ein CSS-Stylesheet dynamisch mit JavaScript

Klicken Sie auf die Schaltfläche „Schaltfläche“. Der folgende Effekt wird angezeigt: „Wichtig“ wechselt zur roten Schrift

So ändern Sie ein CSS-Stylesheet dynamisch mit JavaScript

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Video-Tutorial auf der chinesischen PHP-Website. ! !

Das obige ist der detaillierte Inhalt vonSo ändern Sie ein CSS-Stylesheet dynamisch mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!