JQuery 点击实现开关灯,改变CSS属性值

jquery.png

1、引入jquery

<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>

2、页面布局

<div class="test">测试内容</div><br>
<input type="button" id="btnLight" value="关灯"/>

3、核心控制

<script>
        $(function() {
            $('#btnLight').click(function () {
                if (this.value == '关灯') {
                    $('body').css('background-color', 'black');
                    $('div').css('color', 'white');
                    $(this).val('开灯');
                } else {
                    $('body').css('background-color', 'white');
                    $('div').css('color', '#000000');
                    $(this).val('关灯');
                }
            });
        });
    </script>
滇ICP备16003699号-2
最后修改:2019 年 01 月 22 日
如果觉得我的文章对你有用,请随意赞赏