jQuery 操作 CSS
jQuery 常用CSS操作方法：
| 方法 | 作用 |
|---|---|
| css() | 设置或返回样式属性 |
| addClass() | 向被选元素添加一个或多个类 |
| removeClass() | 从被选元素删除一个或多个类 |
| toggleClass() | 对被选元素进行添加或删除类的切换操作 |
方法实例：
1.css()
返回某个属性：
<script>
$(document).ready(function(){
$("button").click(function(){
console.log($("p").css("background-color");
});
});
</script>
设置多个属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").css({"background-color":"green","font-size":"20px","width":"200px","height":"200px"});
});
});
</script>
</head>
<body>
<div>被添加属性的元素</div>
<button>为当前元素设置多个css属性</button>
</body>
</html>
2.addClass()
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").addClass("green");
$("div").addClass("main");
});
});
</script>
3.removeClass()
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("green");
});
});
</script>
4.toggleClass()
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("blue");
});
});
</script>
扫一扫
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
