JS版网站风格切换实例代码

2023年6月11日上午10:49 • JavaScript

当你想为你的网站添加夜间模式或其他风格切换功能时，你可以使用JavaScript编写代码来实现。下面是一个JavaScript版本的网站风格切换实例代码，以及详细的操作步骤。

实现方法

HTML

首先，我们需要在HTML中添加用于切换风格的按钮，以及用于切换后替换网页风格的样式表。例如，在<head>标签中添加两个样式表：

<head>
  <link rel="stylesheet" href="day.css" id="dayStyle">
  <link rel="stylesheet" href="night.css" id="nightStyle" disabled>
</head>

关键点在于第二个样式表的disabled属性，这样刚开始进入页面时，夜间模式的样式表不会被加载。

在<body>中添加按钮：

<body>
  <button onclick="swapStyles()">切换风格</button>
  <p>这是内容</p>
</body>

JavaScript

接下来，我们需要编写JavaScript代码来实现风格切换功能。

首先，我们要定义一个函数swapStyles()，来实现样式表的替换。在这个函数中，我们使用document.getElementById()方法来获取样式表元素，并使用其disabled属性来切换样式表的启用状态。具体代码如下：

function swapStyles() {
    var dayStyle = document.getElementById('dayStyle');
    var nightStyle = document.getElementById('nightStyle');
    if (dayStyle.disabled) {
        dayStyle.disabled = false;
        nightStyle.disabled = true;
    } else {
        dayStyle.disabled = true;
        nightStyle.disabled = false;
    }
}

通过点击按钮，执行swapStyles()函数，若当前为白天模式，那么就禁用白天模式的样式表，启用夜间模式的样式表; 若当前为夜间模式，那么就禁用夜间模式的样式表，启用白天模式的样式表。

示例

纯CSS版风格切换

在这个示例中，我们以<link>元素的media属性来实现风格切换，避免使用JavaScript。如果浏览器宽度小于600像素，则应用夜间模式；如果大于等于600像素，则应用白天模式。示例代码如下：

HTML：

<head>
  <link rel="stylesheet" href="day.css" media="(min-width: 600px)">
  <link rel="stylesheet" href="night.css" media="(max-width: 599px)">
</head>
<body>
  <p>这是内容</p>
</body>

CSS：

/* 白天模式的样式表 */
p {
  color: black;
  background-color: white;
}

/* 夜间模式的样式表 */
@media (max-width: 599px) {
  p {
    color: white;
    background-color: black;
  }
}

JavaScript版风格切换

在这个示例中，我们使用JavaScript来实现风格切换，通过点击按钮切换样式表。示例代码如下：