用html实现切换夜间模式

最新推荐文章于 2024-04-12 03:27:31 发布

不断完善的楠

最新推荐文章于 2024-04-12 03:27:31 发布

阅读量2.7k

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_51062428/article/details/123025402

版权

用html实现切换夜间模式

利用html实现切换夜间模式：让黑背景白字<==>黑字白背景相互切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--切换夜间模式-->
    <!--此时，先默认为日间模式-->
    <div class="container light">
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
    </div>
    <style>
        /*去除浏览器默认样式*/
        *{
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }
        /*让html和body和浏览器的高度一致*/
        html,body{
            height: 100%;
        }
        /*这里的 高度 百分百 ：和父元素一样高*/
        .container{
            width:100%;
            height:100%;
        }
        /*这里设置日间模式*/
        .light{
            background-color: #f3f3f3;
            color:#333;
        }
        /*这里设置夜间模式*/
        .dark{
            background-color: #333;
            color: #f3f3f3;
        }

    </style>
    <script>
        let container=document.querySelector('div');
        container.onclick=function () {
            //查询的是div当中的className
            console.log(container.className);
            //在JS当中，indexOf:在一个字符串中去寻找一个待查找字符串，如果查找到了，返回其下标值，如果没有找到，则返回-1
            if(container.className.indexOf('light')!=-1){
                //当前处于日间模式，需要修改成夜间模式
                container.className='container dark';
            }else{
                //当前处于夜间模式，需要修改成日间模式
                container.className='container light';
            }
        }
    </script>
</body>
</html>

实现结果：
刚开始的样子:
任意点击之后:

不断完善的楠

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
用html实现切换夜间模式

用html实现切换夜间模式利用html实现切换夜间模式：让黑背景白字<==>黑字白背景相互切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>  <!--此时，先默认为日
复制链接

扫一扫