当你想为你的网站添加夜间模式或其他风格切换功能时，你可以使用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来实现风格切换，通过点击按钮切换样式表。示例代码如下：
HTML：
<head>
<link rel="stylesheet" href="day.css" id="dayStyle">
<link rel="stylesheet" href="night.css" id="nightStyle" disabled>
</head>
<body>
<button onclick="swapStyles()">切换风格</button>
<p>这是内容</p>
</body>
JavaScript：
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;
}
}
CSS：
/* 白天模式的样式表 */
p {
color: black;
background-color: white;
}
/* 夜间模式的样式表 */
#nightStyle {
color: white;
background-color: black;
}
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS版网站风格切换实例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 