JS 切换 Style 标签|极客笔记

JS 切换 Style 标签

在前端开发中，我们经常会遇到需要切换网页样式的情况，例如实现夜间模式、主题切换等功能。而通过 JavaScript 操作 CSS 样式中的 <style> 标签，就可以实现动态切换样式的效果。

本文将详细介绍如何通过 JS 切换 <style> 标签的内容，实现动态改变网页样式的效果。

1. 获取 `<style>` 标签

首先，我们需要获取到需要切换的 <style> 标签。可以通过 document.querySelector() 方法来获取到指定的 <style> 标签。例如，我们有一个 ID 为 theme-style 的 <style> 标签：

<style id="theme-style">
  body {
    background-color: white;
    color: black;
  }
</style>

使用 JavaScript 获取该 <style> 标签的代码如下：

const styleTag = document.querySelector('#theme-style');

2. 切换样式内容

获取到 <style> 标签后，我们可以通过修改其 innerHTML 属性来改变样式的内容。例如，我们定义两种不同的主题样式：

const lightTheme = `
  body {
    background-color: white;
    color: black;
  }
`;

const darkTheme = `
  body {
    background-color: #333;
    color: white;
  }
`;

然后，我们可以通过点击按钮等事件来切换样式。例如，定义一个按钮来切换主题：

<button onclick="toggleTheme()">切换主题</button>

在 JavaScript 中定义 toggleTheme() 函数来切换主题：

function toggleTheme() {
  if (styleTag.innerHTML === lightTheme) {
    styleTag.innerHTML = darkTheme;
  } else {
    styleTag.innerHTML = lightTheme;
  }
}

上述代码中，当点击按钮时，判断当前样式内容是否为 lightTheme，如果是则切换为 darkTheme，反之切换为 lightTheme。通过不断点击按钮，即可实现动态切换主题的效果。

3. 完整示例

下面是一个完整的示例，演示如何切换 <style> 标签的内容来动态改变网页主题样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态切换样式</title>
  <style id="theme-style">
    body {
      background-color: white;
      color: black;
    }
  </style>
</head>
<body>
  <h1>动态切换样式</h1>
  <button onclick="toggleTheme()">切换主题</button>

  <script>
    const styleTag = document.querySelector('#theme-style');

    const lightTheme = `
      body {
        background-color: white;
        color: black;
      }
    `;

    const darkTheme = `
      body {
        background-color: #333;
        color: white;
      }
    `;

    function toggleTheme() {
      if (styleTag.innerHTML === lightTheme) {
        styleTag.innerHTML = darkTheme;
      } else {
        styleTag.innerHTML = lightTheme;
      }
    }
  </script>
</body>
</html>

在上述示例中，点击按钮即可切换页面的主题样式，实现动态改变网页样式的效果。