JavaScript 如何加载CSS文件

CSS文件用于描述HTML元素的显示方式。有多种方式可以在HTML文档中添加CSS文件。还可以使用JavaScript来加载CSS文件。

方法：

使用document.getElementsByTagName()方法获取HTML head元素。
使用createElement(‘link’)方法创建新的链接元素。
初始化链接元素的属性。
将链接元素附加到head中。

示例1： 此示例使用JavaScript在HTML文档中添加CSS文件。

创建CSS文件，命名为style.css：

.GFG {
    color:green;
}

使用JavaScript添加CSS文件：

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Load CSS file using JavaScript
    </title>
 
    <script>
         
        // Get HTML head element
        let head = document.getElementsByTagName('HEAD')[0];
 
        // Create new link Element
        let link = document.createElement('link');
 
        // set the attributes for link element
        link.rel = 'stylesheet';
     
        link.type = 'text/css';
     
        link.href = 'style.css';
 
        // Append link element to HTML head
        head.appendChild(link);
    </script>
</head>
 
<body>
    <h2 class="GFG">GeeksForGeeks</h2>
</body>
 
</html>

输出：

JavaScript 如何加载CSS文件

使用名称style.css创建CSS文件：

.GFG {
    font-size:24px;
    font-weight:bold;
    color:white;
    background-color:green;
    padding:10px;
    text-align:center;
}

使用JavaScript添加CSS文件：

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Load CSS file using JavaScript
    </title>
 
    <script>
        // Create new link Element
        let link = document.createElement('link');
         
        // set the attributes for link element
        link.rel = 'stylesheet';
             
        link.type = 'text/css';
             
        link.href = 'style.css';
         
        // Get HTML head element to append
        // link element to it
        document.getElementsByTagName('HEAD')[0].appendChild(link);
         
    </script>
</head>
 
<body>
    <div class="GFG">GeeksforGeeks</div>
</body>
 
</html>

输出：

JavaScript 如何加载CSS文件