CODEWITHSUNDEEP
javascripthtmljquerycssappendchild
Nani
Nani

Reputation: 7

How to load external Css file using JavaScript

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>

Upvotes: 1

Views: 1384

Answers (1)

Ran Turner
Ran Turner

Reputation: 18026

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

Upvotes: 1

Related Questions