搜尋

首頁 >web前端 >js教程 >如何使用JavaScript載入CSS檔案？ （程式碼範例）

如何使用JavaScript載入CSS檔案？ （程式碼範例）

青灯夜游
青灯夜游原創
2019-02-23 09:59:543642瀏覽

CSS檔案用來描述HTML元素的顯示方式，有各種方法可以在HTML文件中加入CSS檔案。 JavaScript就可在HTML文件中載入CSS文件，那麼如何使用JavaScript載入CSS文件？下面這篇文章就來跟大家介紹一下，希望對大家有幫助。 【影片教學推薦：JavaScript教學】

如何使用JavaScript載入CSS檔案？ （程式碼範例）

做法：

##●使用document.getElementsByTagName（）方法取得HTML頭元素。

●　使用createElement（'link'）方法建立新的連結元素。

●　初始化link元素的屬性。

●　將連結元素附加到頭部。

程式碼範例

下面透過程式碼範例來具體看看JavaScript如何在HTML文件中載入CSS檔案。

範例1：

建立名稱style.css的檔案：

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

使用JavaScript新增CSS檔案：

<!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>

輸出：

如何使用JavaScript載入CSS檔案？ （程式碼範例）

範例2：

#style.css檔案程式碼：

.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;
}

使用JavaScript新增CSS檔案

<!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>

輸出：

如何使用JavaScript載入CSS檔案？ （程式碼範例）

以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！ ！ ！

以上是如何使用JavaScript載入CSS檔案？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript css html
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：ajax工作原理是什麼下一篇：ajax工作原理是什麼

相關文章

看更多