本文主要是介绍【Web应用技术基础】JavaScript(5)——案例：开启夜间模式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
视频已发。截图如下：
1.点击页面切换到夜间模式
2.再次点击恢复白天模式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}.light {background-color: white;color: black;}.dark {background-color: black;color: white;}</style>
</head>
<body><div calss="container light">Hello World<br>Hello World<br>Hello World<br></div>
</body>
<script>var div=document.querySelector('div');div.onclick=function () {if(div.className.indexOf('light')!=-1){div.className='container dark';}else{div.className='container light';}}
</script>
</html>这篇关于【Web应用技术基础】JavaScript(5)——案例：开启夜间模式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
