TypechoJoeTheme

轩宇网

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

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

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、核心控制
<!--wxfollow start-->

<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>

<!--wxfollow end-->

赞(0)