html动态加载css样式和js脚本示例

下面我来详细讲解“HTML动态加载CSS样式和JS脚本示例”的攻略。

动态加载CSS样式

方式一

我们可以使用 JavaScript 中的 link 元素动态加载 CSS 样式表。可以通过 JavaScript 来创建 link 元素，给 link 元素设置 rel 属性值为 stylesheet，type 属性值为 text/css，href 属性值为 CSS 文件的路径，然后将 link 元素添加到 head 标签中即可。

<!DOCTYPE html>
<html>
  <head>
    <title>动态加载CSS样式表示例一</title>
  </head>
  <body>
    <h1>动态加载CSS样式表示例一</h1>
    <button onclick="addCss()">加载CSS样式表</button>
    <script>
      function addCss() {
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "style.css";
        document.head.appendChild(link);
      }
    </script>
  </body>
</html>

上面的示例中，我们在 body 中添加了一个按钮，当点击按钮时会调用 addCss() 函数，函数中创建了一个 link 元素并配置了相关属性，最后将 link 元素添加到 head 标签中，即可动态加载 CSS 样式表。

方式二

我们也可以在 HTML 文件中预先声明 link 元素，在需要的时候再修改 href 属性以动态加载 CSS 样式表。

<!DOCTYPE html>
<html>
  <head>
    <title>动态加载CSS样式表示例二</title>
    <link rel="stylesheet" type="text/css" href="default.css" id="myCss" />
  </head>
  <body>
    <h1>动态加载CSS样式表示例二</h1>
    <button onclick="changeCss()">加载CSS样式表</button>
    <script>
      function changeCss() {
        var css = document.getElementById("myCss");
        css.href = "new.css";
      }
    </script>
  </body>
</html>

上面的示例中，我们在 head 中预先声明了 link 元素，并设置 id 属性为 “myCss”。在 body 标签末尾添加了一个按钮，当点击按钮时调用 changeCss() 函数，函数中获取 id 为 “myCss” 的 link 元素，修改其 href 属性为需要加载的 CSS 样式表，在浏览器中就可以动态加载 CSS 样式表。

动态加载 JS 脚本

方式一

我们可以使用 JavaScript 中的 script 元素动态加载 JS 脚本。同样地，我们可以通过 JavaScript 来创建 script 元素，给 script 元素设置 type 属性值为 text/javascript，src 属性值为 JS 文件的路径，然后将 script 元素添加到 body 标签中即可。

<!DOCTYPE html>
<html>
  <head>
    <title>动态加载JS脚本示例一</title>
  </head>
  <body>
    <h1>动态加载JS脚本示例一</h1>
    <button onclick="addScript()">加载JS脚本</button>
    <script>
      function addScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "script.js";
        document.body.appendChild(script);
      }
    </script>
  </body>
</html>

上面的示例中，我们在 body 中添加了一个按钮，当点击按钮时会调用 addScript() 函数，函数中创建了一个 script 元素并配置了相关属性，最后将 script 元素添加到 body 标签中，即可动态加载 JS 脚本。

方式二

我们也可以在 HTML 文件中预先声明 script 元素，在需要的时候再动态修改 src 属性以加载 JS 脚本。

<!DOCTYPE html>
<html>
  <head>
    <title>动态加载JS脚本示例二</title>
    <script type="text/javascript" src="default.js" id="myScript"></script>
  </head>
  <body>
    <h1>动态加载JS脚本示例二</h1>
    <button onclick="changeScript()">加载JS脚本</button>
    <script>
      function changeScript() {
        var script = document.getElementById("myScript");
        script.src = "new.js";
      }
    </script>
  </body>
</html>

上面的示例中，我们在 head 中预先声明了 script 元素，并设置 id 属性为 “myScript”。在 body 标签末尾添加了一个按钮，当点击按钮时调用 changeScript() 函数，函数中获取 id 为 “myScript” 的 script 元素，修改其 src 属性为需要加载的 JS 脚本，在浏览器中就可以动态加载 JS 脚本。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html动态加载css样式和js脚本示例 - Python技术站

html动态加载css样式和js脚本示例

动态加载CSS样式

方式一

方式二

动态加载 JS 脚本

方式一

方式二

相关文章