(四)jQuery css操作

(四)jQuery css操作

获取并设置css类:

   addClass() : 向被选元素添加一个或多个类

   removeClass() : 从被选元素删除一个或多个类

   toggleClass()  :对被选元素进行添加/删除类的切换操作(只能对没有类的实行添加或者删除)

   css() :获取属性的值或者设置属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
	//addClass添加
   $("btn1").click(function(){
    $("#p1").addClass("clo");
  });
	//removeClass删除
	$("#btn2").click(function(){
    $("#p1").removeClass("clo");
  });
	//toggleClass切换
	$("#btn3").click(function(){
    $("#p1").toggleClass("important clo");
  });
	//css设置样式
  $("#btn4").click(function(){
    $("p").css({"background-color":"yellow","font-size":"100%"});
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.clo
{
	color:red;
}
</style>
</head>
<body>
<h2>这是一个标题</h2>
<p id="p1">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button id="btn1">addClass添加</button>
<button id="btn2">removeClass删除</button>
<button id="btn3">toggleClass切换</button>
<button id="btn4">css设置多个样式</button>
</body>
</html>



猜你喜欢

转载自blog.csdn.net/qq_35418250/article/details/77983518