Js控制css——模仿视频网站关灯开灯

简介:
 

<head>
    <title></title>
    <style type="text/css">
        .day
        {
            background-color:White;
        }
       
        .night
        {
            background-color:Black;
        }
    </style>
    <script type="text/javascript">
        function SwitchLight() {
            var btn = document.getElementByIdx_x("btnChange");

            if (document.body.className == "night") {
                document.body.className = "day";
                btn.value = "关灯";
            }
            else if (document.body.className == "day") {
                document.body.className = "night";
                btn.value = "开灯";
            }
        }
    </script>
</head>
<body class="night">
    <input id="btnChange" type="button" value="开灯" onclick="SwitchLight()" />
</body>

目录
相关文章
|
3天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
9 0
|
11天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
17天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
26 0
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
27 0
|
1月前
|
缓存 自然语言处理 前端开发
JS/CSS体积减少了67%,我们是如何做到的?
JS/CSS体积减少了67%,我们是如何做到的?
18 1
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
Web App开发 前端开发 JavaScript