js实现单一html页面两套css切换代码

要实现单一 HTML 页面两套 CSS 切换，可以使用 JavaScript 来动态修改 HTML 的 link 标签的 href 属性。下面是实现的详细步骤：

1. 在 HTML 文件中引入两套 CSS 文件

首先将两套 CSS 文件引入到 HTML 文件中，分别在 head 标签中加入两个 link 标签，并为它们加上类名或 ID 以便在 JavaScript 中方便获取和修改。

<head>
  <link rel="stylesheet" href="style1.css" class="css1">
  <link rel="stylesheet" href="style2.css" class="css2">
</head>

2. 编写 JavaScript 代码

接下来我们需要编写一个 JavaScript 函数，将需要的 CSS 样式文件动态加载到网页中。我们可以在 head 标签中再加入一个 script 标签，并在其中编写 JavaScript 代码。

<head>
  <link rel="stylesheet" href="style1.css" class="css1">
  <link rel="stylesheet" href="style2.css" class="css2">
  <script>
    function switchCSS(cssClass) {
      const links = document.getElementsByTagName('link');
      for (let i = 0; i < links.length; i++) {
        const link = links[i];
        if (link.getAttribute('rel').indexOf('stylesheet') !== -1 && link.getAttribute('class') === cssClass) {
          link.disabled = false;
        } else if (link.getAttribute('rel').indexOf('stylesheet') !== -1) {
          link.disabled = true;
        }
      }
    }
  </script>
</head>

这段代码定义了一个名为 switchCSS 的函数，函数接受一个参数 cssClass，表示需要加载的 CSS 样式文件对应的类名或 ID。函数通过获取所有的 link 标签，然后根据需要加载的 CSS 样式文件的类名或 ID 来动态修改 link 标签的 disabled 属性，实现转换样式的效果。

3. 触发 JavaScript 函数

最后，我们需要为用户提供切换按钮，点击按钮时触发 JavaScript 函数来实现样式切换的效果。以按钮点击为例，代码如下：

<button onclick="switchCSS('css1')">样式1</button>
<button onclick="switchCSS('css2')">样式2</button>

以上就是使用 JavaScript 实现单一 HTML 页面两套 CSS 切换的完整攻略。下面给出两条示例说明：

示例1：使用类名实现样式切换

<head>
  <link rel="stylesheet" href="style1.css" class="css1">
  <link rel="stylesheet" href="style2.css" class="css2">
  <script>
    function switchCSS(cssClass) {
      const links = document.getElementsByTagName('link');
      for (let i = 0; i < links.length; i++) {
        const link = links[i];
        if (link.getAttribute('rel').indexOf('stylesheet') !== -1 && link.getAttribute('class') === cssClass) {
          link.disabled = false;
        } else if (link.getAttribute('rel').indexOf('stylesheet') !== -1) {
          link.disabled = true;
        }
      }
    }
  </script>
</head>
<body>
  <button onclick="switchCSS('css1')">样式1</button>
  <button onclick="switchCSS('css2')">样式2</button>
  <p class="text-style1">这是样式1下的文字</p>
  <p class="text-style2">这是样式2下的文字</p>
</body>

上面的代码中，我们在两个 CSS 样式文件中分别定义了两个类名为 text-style1 和 text-style2 的样式，并在 HTML 中使用这两个类名，当切换样式时，text-style1 和 text-style2 样式也会跟随切换。

示例2：使用 ID 实现样式切换

<head>
  <link rel="stylesheet" href="style1.css" id="css1">
  <link rel="stylesheet" href="style2.css" id="css2">
  <script>
    function switchCSS(cssId) {
      const cssURL = document.getElementById(cssId).getAttribute('href');
      document.getElementById('dynamic-css').setAttribute('href', cssURL);
    }
  </script>
</head>
<body>
  <button onclick="switchCSS('css1')">样式1</button>
  <button onclick="switchCSS('css2')">样式2</button>
  <p id="text-style">这是样式切换后的文字</p>
  <link rel="stylesheet" href="" id="dynamic-css">
</body>

上面的代码中，我们在两个 CSS 样式文件中分别定义了两个 ID 为 css1 和 css2 的样式，并在 HTML 中使用一个 ID 为 text-style 的元素，当切换样式时，text-style 元素的样式也会跟随切换。注意这里我们只定义了一个空的 link 标签，并为它加上了 ID，当切换样式时，动态修改它的 href 属性即可实现样式切换。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现单一html页面两套css切换代码 - Python技术站