如何使用 JavaScript 加载外部 Css 文件

Question

I am trying to call css external file through JavaScript but its not working Please help me on this.我正在尝试通过 JavaScript 调用 css 外部文件，但它不起作用请帮我解决这个问题。 How to call external css pages through JavaScript.如何通过 JavaScript 调用外部 css 页面。 While am running the above code css is not reflecting on the browser.当我运行上面的代码时，css 没有反映在浏览器上。

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

Answer 1

Add the css file to your project and use a relative path instead of the full path specifed.将 css 文件添加到您的项目并使用相对路径而不是指定的完整路径。 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.如果您希望通过 javascript 加载它，您可以使用insertAdjacentHTML ，它可以在一行中完成。

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 insertAdjacentHTML - https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

如何使用 JavaScript 加载外部 Css 文件

问题描述

1 个解决方案

解决方案1
1 2021-10-21 08:09:37

如何使用 JavaScript 加载外部 Css 文件

问题描述

1 个解决方案

解决方案1 1 2021-10-21 08:09:37

解决方案1
1 2021-10-21 08:09:37