Rumah > Artikel > hujung hadapan web > 如何使用JavaScript加载CSS文件？（代码示例）

如何使用JavaScript加载CSS文件？（代码示例）

青灯夜游asal: 2019-02-23 09:59:543546semak imbas

CSS文件用于描述HTML元素的显示方式，有各种方法可以在HTML文档中添加CSS文件。JavaScript就可在HTML文档中加载CSS文件，那么如何使用JavaScript加载CSS文件？下面本篇文章就来给大家介绍一下，希望对大家有所帮助。【视频教程推荐：JavaScript教程】

做法：

●　使用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>

输出：

示例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>

输出：

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！

Atas ialah kandungan terperinci 如何使用JavaScript加载CSS文件？（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php JavaScript css html

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：ajax工作原理是什么Artikel seterusnya：bootsrap与vue哪个好

Artikel berkaitan

Lihat lagi

jQuery动态加载css文件步骤详解