Home >Web Front-end >JS Tutorial >How to load CSS files using JavaScript? (code example)

How to load CSS files using JavaScript? (code example)

青灯夜游Original: 2019-02-23 09:59:543638browse

CSS files are used to describe how HTML elements are displayed. There are various ways to add CSS files to HTML documents. JavaScript can load CSS files in HTML documents, so how to use JavaScript to load CSS files? The following article will introduce it to you, I hope it will be helpful to you. [Video tutorial recommendation: JavaScript tutorial]

##How to do:

● Get the HTML header element using the document.getElementsByTagName() method.

● Use the createElement('link') method to create a new link element.

●Initialize the attributes of the link element.

●Append the link element to the header.

Code Example

The following is a code example to see how JavaScript loads CSS files in HTML documents.

Example 1:

Create a file named style.css:

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

Add a CSS file using JavaScript:

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

Output :

How to load CSS files using JavaScript? (code example)

Example 2:

style.css file code:

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

Add CSS file using JavaScript

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

Output:

How to load CSS files using JavaScript? (code example)

The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to load CSS files using JavaScript? (code example). For more information, please follow other related articles on the PHP Chinese website!

php JavaScript css html

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：how ajax worksNext article：how ajax works

See more

Detailed explanation of the steps to dynamically load css files with jQuery

How to load CSS files using JavaScript? (code example)

Related articles