<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换主题</title>
<link rel="stylesheet" type="text/css" href="./test.css"/>
</head>
<body>
<div onclick="toggleTheme()">更改主题</div>
<div class="parent">
<ul>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
</ul>
</div>
</body>
<script>
let darkMode = false
function toggleTheme(){
darkMode = !darkMode
document.querySelector('html').setAttribute('theme', darkMode ? 'dark' : 'light')
}
</script>
<style>
.parent{
width: 100%;
height: 100%;
font-size: 24px;
}
ul{
width: 100%;
height: 100%;
}
ul li{
height: 100px;
}
</style>
</html>
网页主题切换的简单示例
需积分: 0 18 浏览量
2023-09-20
15:57:33
上传
评论
收藏 958B ZIP 举报
test.zip （2个子文件） 
test 
test.css 248B
test.html 819B资源评论
爱生活爱Coding
- 粉丝: 4
- 资源: 9
最新资源
- 手把手数据结构-练习二叉树
- 2213springboot基于web的智内含有完整的项目工程（idea工程+数据库代码）+项目部署视频+项目讲解视频（搞定答辩
- 计算机网络课程设计 即时通讯软件Minet
- indy10 Demo 资源
- 2208springcloud分布式架构网内含有完整的项目工程（idea工程+数据库代码）+项目部署视频+项目讲解视频（搞定答辩
- indy9 Demo 及 Delphi 来与网络与君分享源码
- 内含有完整的项目工程（idea工程+数据库代码）+项目部署视频+项目讲解视频
- 计算机网络学习实验代码
- 2205springboot财务管理系统内含有完整的项目工程（idea工程+数据库代码）+项目部署视频+项目讲解视频
- 2204springboot4S店车辆管理系统内含有完整的项目工程（idea工程+数据库代码）+项目部署视频+项目讲解视频
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
