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

当我们的网站需要多种样式和脚本的时候，我们可以使用一些方法来动态地加载它们，以提高网站的性能和加载速度。这篇文章将详细介绍HTML动态加载CSS样式和JS脚本的方法和步骤。

HTML动态加载CSS样式的方法

在HTML中，我们可以使用<link>标签来加载CSS样式。但是，如果我们的网站需要加载多种CSS样式，那么我们可以使用JavaScript来动态地添加CSS文件。

使用JavaScript创建新的<link>标签

<!DOCTYPE html>
<html>
  <head>
    <title>HTML动态加载CSS样式示例1</title>
  </head>
  <body>
    <p>点击下面的按钮添加样式</p>
    <button onclick="addStyles()">添加样式</button>
    <script>
      function addStyles() {
        var link = document.createElement("link");
        link.setAttribute("rel", "stylesheet");
        link.setAttribute("href", "style2.css");
        document.head.appendChild(link);
      }
    </script>
  </body>
</html>

在上面的示例中，我们使用JavaScript创建了一个新的<link>标签，并将其添加到了<head>标签中。这样，当用户点击“添加样式”按钮时，我们刚刚创建的style2.css文件就会被加载到HTML页面中。

使用JavaScript修改已有的<link>标签的属性

<!DOCTYPE html>
<html>
  <head>
    <link id="style1" rel="stylesheet" type="text/css" href="style1.css">
    <title>HTML动态加载CSS样式示例2</title>
  </head>
  <body>
    <p>点击下面的按钮更改样式</p>
    <button onclick="changeStyles()">更改样式</button>
    <script>
      function changeStyles() {
        var link = document.getElementById("style1");
        link.setAttribute("href", "style2.css");
      }
    </script>
  </body>
</html>

在这个示例中，我们在HTML中创建了一个<link>标签，并用id属性给它命名。然后，我们在JavaScript中使用getElementById方法获取到这个标签，并使用setAttribute方法修改了它的href属性，将其更改为style2.css文件。这样一来，原来的样式文件就会被新的样式文件替换。

HTML动态加载JS脚本的方法

与CSS样式类似，我们可以使用<script>标签来加载JavaScript脚本。但是，如果我们需要动态加载多个脚本文件，我们可以使用以下方法。

使用JavaScript创建新的<script>标签

<!DOCTYPE html>
<html>
  <head>
    <title>HTML动态加载JS脚本示例1</title>
  </head>
  <body>
    <p>点击下面的按钮添加脚本</p>
    <button onclick="addScripts()">添加脚本</button>
    <script>
      function addScripts() {
        var script = document.createElement("script");
        script.setAttribute("src", "script2.js");
        document.head.appendChild(script);
      }
    </script>
  </body>
</html>

在这个示例中，我们使用JavaScript创建了一个新的<script>标签，并将其添加到了<head>标签中。这样，当用户点击“添加脚本”按钮时，我们刚刚创建的script2.js文件就会被加载到HTML页面中。

使用XMLHttpRequest对象动态加载JS脚本

<!DOCTYPE html>
<html>
  <head>
    <title>HTML动态加载JS脚本示例2</title>
  </head>
  <body>
    <p>点击下面的按钮添加脚本</p>
    <button onclick="addScripts()">添加脚本</button>
    <script>
      function addScripts() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
            var script = document.createElement("script");
            script.text = xhr.responseText;
            document.head.appendChild(script);
          }
        };
        xhr.open("GET", "script2.js", true);
        xhr.send();
      }
    </script>
  </body>
</html>

在这个示例中，我们使用XHR对象向服务器发送请求，并在服务器响应时将返回的数据（即JS脚本）添加到HTML页面中。具体来说，当用户点击“添加脚本”按钮时，我们使用onreadystatechange事件监听XHR对象的状态，如果XHR的readyState为4（即请求完成），并且status为200（即请求成功），就说明我们成功地从服务器中获取了JS脚本文件。此时，我们就可以创建一个新的<script>标签，并将响应的文本设置为标签的text属性，然后将其添加到HTML页面中，以此来实现动态加载JS脚本的目的。

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

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

HTML动态加载CSS样式的方法

HTML动态加载JS脚本的方法

相关文章