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

jQuery之dom操作(属性、样式操作)

2015-12-05 16:33 751 查看

1.属性操作

读取：attr('');

设置：attr('','');

设置多个：attr({'':'','':''});

删除：removeAttr('');

2.样式操作

获取和设置：attr("class","");/attr("style","");

追加：addClass('');

移除：removeClass('')/removeClass('s1 s2')

/removeClass()--删除所有

切换样式：toggleClass,有该样式就删除，没有就添加。

是否有某个样式：hasClass('');

读取css('')

设置css('');/css({'':'','':''});

示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>样式操作</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<style type="text/css">
.s1{
font-size:60px;
}
.s2{
font-size:30px;
color:red;
}
.s3{
font-style:italic;
}
</style>
<script type="text/javascript">
$(function(){
$('#b1').click(function(){
//设置样式
//$('#d1').attr('class','s1');
//$('#d1').attr('style','color:red;');
//$('#d1').addClass('s1 s2');

//追加样式
//参数必须是一个样式选择器的名字
$('#d3').addClass('s2');

//移除样式
//$('#d3').removeClass('s1');
//删除所有样式
//$('#d3').removeClass();

//切换样式
//toggleClass,有该样式就删除，没有就添加。
//$('#d4').toggleClass('s3');

//是否有某个样式
//alert($('#d4').hasClass('s3'));
});
});
</script>
</head>
<body style="font-size:30px;">
<div id="d2" class="s1 s2">测试代码</div>
<div id="d1">hello jQuery</div>
<div id="d3" class="s1">追加样式</div>
<div id="d4" class="s3">切换样式</div>
<input id="b1" type="button" value="样式操作"><br/>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航