Wie lade ich CSS-Dateien mit JavaScript? (Codebeispiel)-js-Tutorial-php.cn

Wie lade ich CSS-Dateien mit JavaScript? (Codebeispiel)

青灯夜游

Freigeben： 2019-02-23 09:59:54

Original

3627 Leute haben es durchsucht

CSS-Dateien werden verwendet, um zu beschreiben, wie HTML-Elemente angezeigt werden, und es gibt verschiedene Möglichkeiten, CSS-Dateien zu HTML-Dokumenten hinzuzufügen. JavaScript kann CSS-Dateien in HTML-Dokumente laden. Wie kann ich also JavaScript zum Laden von CSS-Dateien verwenden? Der folgende Artikel wird es Ihnen vorstellen und ich hoffe, dass er Ihnen hilfreich sein wird. [Video-Tutorial-Empfehlung: JavaScript-Tutorial]

Wie lade ich CSS-Dateien mit JavaScript? (Codebeispiel)

So geht's:

● Rufen Sie das HTML-Header-Element mit der Methode document.getElementsByTagName() ab.

● Verwenden Sie die Methode createElement('link'), um ein neues Linkelement zu erstellen.

●Initialisieren Sie die Attribute des Linkelements.

●Fügen Sie das Linkelement an die Kopfzeile an.

Codebeispiel

Das Folgende ist ein Codebeispiel, um zu sehen, wie JavaScript CSS-Dateien in HTML-Dokumente lädt.

Beispiel 1:

Erstellen Sie eine Datei mit dem Namen style.css:

.demo { 
width: 400px;
height: 200px;
border: 1px solid red;
    color:red; 
    margin: 50px auto;
    text-align: center;
    line-height: 200px;
}

Nach dem Login kopieren

CSS-Datei mit JavaScript hinzufügen:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
    <title> 
        Load CSS file using JavaScript 
    </title> 
  
    <script> 
          
        // 获取HTML头元素
        var head = document.getElementsByTagName(&#39;head&#39;)[0];  
  
        // 创建新链接元素
        var link = document.createElement(&#39;link&#39;); 
  
        // 设置链接元素的属性
        link.rel = &#39;stylesheet&#39;;  
      
        link.type = &#39;text/css&#39;; 
      
        link.href = &#39;style.css&#39;;  
  
        // 将链接元素附加到HTML头
        head.appendChild(link);  
    </script>  
</head> 
  
<body> 
    <h2 class="demo">php中文网！</h2> 
</body> 
  
</html>

Nach dem Login kopieren

Ausgabe :

Wie lade ich CSS-Dateien mit JavaScript? (Codebeispiel)

Beispiel 2:

style.css-Dateicode:

.demo { 
width: 400px;
height: 100px;
border: 1px solid green;
    font-size:25px; 
    font-weight:bold; 
    color:white; 
    background-color:pink; 
    text-align:center; 
    line-height: 100px;
    margin: 50px auto;
}

Nach dem Login kopieren

CSS-Datei mit JavaScript hinzufügen

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
    <title> 
        Load CSS file using JavaScript 
    </title> 
  
    <script> 
          
        // 创建新链接元素
        var link = document.createElement(&#39;link&#39;);  
  
        // 设置链接元素的属性
        link.rel = &#39;stylesheet&#39;;  
        link.type = &#39;text/css&#39;; 
        link.href = &#39;style.css&#39;;  
        
        // 获取 head元素以向其追加链接元素
        document.getElementsByTagName(&#39;head&#39;)[0].appendChild(link); 
    </script>  
</head>  
<body> 
    <h2 class="demo">php中文网！</h2> 
</body> 
</html>

Nach dem Login kopieren

Ausgabe:

Wie lade ich CSS-Dateien mit JavaScript? (Codebeispiel)

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie lade ich CSS-Dateien mit JavaScript? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!