(四)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>