忧郁之子
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-->