jquery中css操作

最新推荐文章于 2024-07-19 12:58:53 发布

cpf2016

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量291

点赞数 1

分类专栏： jquery 文章标签： javascript ViewUI

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

（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%"});

cpf2016

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery中css操作

（1）标签class操作 1.为标签添加一个class$(document).ready(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });});.im
复制链接

扫一扫