How to load CSS files using JavaScript?

The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS file in the HTML document. JavaScript can also be used to load a CSS file in the HTML document.

Approach:

  • Use document.getElementsByTagName() method to get HTML head element.
  • Create new link element using createElement(‘link’) method.
  • Initialize the attributes of link element.
  • Append link element to the head.

Example 1: This example uses JavaScript to add CSS file in HTML document.

  • Create CSS file using name style.css:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .GFG {
        color:green;
    }

    chevron_right

    
    

  • Use JavaScript to add CSS file:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Load CSS file using JavaScript
        </title>
      
        <script>
              
            // Get HTML head element
            var head = document.getElementsByTagName('HEAD')[0]; 
      
            // Create new link Element
            var 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>                    

    chevron_right

    
    

Output:

Example 2: This example uses JavaScript to add CSS file in HTML document.

  • Create CSS file using name style.css:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • Use JavaScript to add CSS file:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Load CSS file using JavaScript
        </title>
      
        <script>
          
            // Create new link Element
            var 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>                    

    chevron_right

    
    

Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.