您的位置：首页 > Web前端 > JQuery

Jquery系列-Jquery操作样式

2013-10-29 00:23 363 查看

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题页</title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
$('#btnAdd').click(function(){
//add class 会进行重复性判断
$('.class1').addClass("class2");

});

$('#btn_remove').click(function(){
//add class 会进行重复性判断
$('.class1').removeClass("class2");

});

$('#btn_toggle').click(function(){
//add class 会进行重复性判断
$('.class1').toggleClass("class2");

});

$('#btn_off').click(function(){
//开关样式(有则remove无则add)
$(document.body).toggleClass("night");

});
});

</script>
<style type="text/css">
/*filter IE支持*/
body{filter:gray;}
.class1{background:red;}
.class2{font-size:50px;}

.night{background:black;}

</style>
</head>
<body>

<div class="class1">您好</div>
<input type="button" value=add id="btnAdd"/>
<input type="button" value=remove id="btn_remove"/>
<input type="button" value=toggle id="btn_toggle"/>

<input type="button" value=on/off id="btn_off"/>
</body>
</html>

[/code]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航