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

【问题标题】：How to load external Css file using JavaScript如何使用 JavaScript 加载外部 Css 文件
【发布时间】：2021-10-21 08:05:49
【问题描述】：

我正在尝试通过 JavaScript 调用 css 外部文件，但它不起作用请帮助我。如何通过 JavaScript 调用外部 css 页面。在运行上述代码时，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>

【问题讨论】：

尝试从服务器加载而不是c:\users..

标签： javascript html jquery css appendchild

【解决方案1】：

将 css 文件添加到您的项目并使用相对路径而不是指定的完整路径。例如：

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

如果你想通过 javascript 加载它，你可以使用insertAdjacentHTML，它可以做到这一点。

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

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

【讨论】：

我想通过 JavaScript 调用这个外部链接，而不是在 head 部分中我想调用
我已根据您的要求更新了答案
它在控制台中显示错误（无法在 )IN InserAdjacentHtml 行中加载资源。
这又可能是由于您的文件路径错误
但是相同的 CSS 链接在 head 标签中工作