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

jquery中css操作

2015-12-04 14:14 459 查看

（1）标签class操作

1.为标签添加一个class

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is some important text!</div>
<br>
<button>Add classes to elements</button>

</body>
</html>

2.为标签添加多个class

$("button").click(function(){
$("#div1").addClass("important blue");
});

3.为标签删除class

$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});

4.对标签的class属性进行增加/删除切换操作

$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});

（2）标签css属性操作

1.获得标签css属性值

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<button>Return background-color of p</button>
</body>
</html>

2.设置标签单个css属性

$("p").css("background-color","yellow");

3.设置标签多个css属性

$("p").css({"background-color":"yellow","font-size":"200%"});

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

标签：

相关文章推荐

新的分享

章节导航