How to load external Css file using JavaScript

Question

I am trying to call css external file through JavaScript but its not working Please help me on this. How to call external css pages through JavaScript. While am running the above code css is not reflecting on the browser.

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Page Title</title>
    <!--<link rel="stylesheet" type="text/css" href="C:\Users\Nani\Desktop\work\New folder\layout.css"> -->
    </head>
    <body>
    
    <div class="header">
      <h1>My Website</h1>
      <p>A <b>responsive</b> website created by me.</p>
    </div>
    
    <div class="navbar">
      <a href="#" class="active">Home</a>
      <a href="#">Link</a>
      <a href="#">Link</a>
      <a href="#" class="right">Link</a>
    </div>
    
    <div class="row">
      <div class="side">
     
        <h2>About Me</h2>
        <h5>Photo of me:</h5>
        <div class="fakeimg" style="height:200px;">
        Image</div>
        <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
        <h3>More Text</h3>
        <p>Lorem ipsum dolor sit ame.</p>
        <div class="fakeimg" style="height:60px;">Image</div><br>
        <div class="fakeimg" style="height:60px;">Image</div><br>
        <div class="fakeimg" style="height:60px;">Image</div>
      </div>
      <div class="main">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2017</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <br>
        <h2>TITLE HEADING</h2>
        <h5>Title description, Sep 2, 2017</h5>
        <div class="fakeimg" style="height:200px;">Image</div>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      </div>
    </div>
    
    <div class="footer">
      <h2>Footer</h2>
    </div>
    <noscript>
    
    </noscript>
    <script>
    (function() {
        var cssMain = document.createElement('link');
        cssMain.href = 'C:\Users\Nani\Desktop\work\New folder\layout.css';
        cssMain.rel = 'stylesheet';
        cssMain.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(cssMain);
    })();
    
    
    </script>
    </body>
    </html>

Try loading from a server rather than c:\users..

fdomn-m
– fdomn-m

2021-10-21 10:01:22 +00:00
Commented Oct 21, 2021 at 10:01 — fdomn-m
– fdomn-m, Commented Oct 21, 2021 at 10:01

Ran Turner · Accepted Answer · 2021-10-21 08:14:43Z

1

Add the css file to your project and use a relative path instead of the full path specifed. for example:

 <link rel="stylesheet" type="text/css" href="./css/layout.css">
</head>

If you wish to load it via javascript, you can use insertAdjacentHTML which can do this is one line.

document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
"<link rel=\"stylesheet\" href=\"path/to/style.css\" />");

insertAdjacentHTML - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

edited Oct 21, 2021 at 8:14

answered Oct 21, 2021 at 8:09

Ran Turner

18.7k9 gold badges60 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nani Over a year ago

I want to call this external link not in head section through JavaScript i want to call

Ran Turner Over a year ago

I updated my answer for your request

Nani Over a year ago

Its showing error in console (Failed to load resource at )IN InserAdjacentHtml line.

Ran Turner Over a year ago

this is again probably due to your wrong file path

Nani Over a year ago

But same CSS link is working in head tag

Collectives™ on Stack Overflow

How to load external Css file using JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related