网页切换风格的代码怎么写,就是点击可切换浅色和深色这种,请给出具体代码实现
时间: 2024-05-04 18:22:49 浏览: 9
以下是实现切换浅色和深色模式的简单示例代码:
HTML部分:
```
<!DOCTYPE html>
<html>
<head>
<title>切换浅色和深色模式</title>
<link rel="stylesheet" id="theme" href="light.css">
<script src="switch.js"></script>
</head>
<body>
<h1>欢迎来到我的网站!</h1>
<button onclick="switchTheme()">切换模式</button>
</body>
</html>
```
CSS文件(可命名为light.css和dark.css):
```
body {
background-color: #f4f4f4;
color: #333;
}
h1 {
border-bottom: 1px solid #999;
}
button {
background-color: #666;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
}
```
JavaScript文件(例如命名为switch.js):
```
function switchTheme() {
var theme = document.getElementById("theme");
if (theme.getAttribute("href") == "light.css") {
theme.setAttribute("href", "dark.css");
} else {
theme.setAttribute("href", "light.css");
}
}
```
以上代码实现了点击"切换模式"按钮时,通过JavaScript修改HTML文件中的CSS链接,实现了浅色和深色模式的切换。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)