jQuery操作CSS样式的方法总共有四种,很简单,建议使用下面的第三种方法。
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery操作CSS样式的方法</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
//1.逐个设置
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","red");
//2.链式设置
//注意点:链式操作如果大于3步,建议分开
$("div").css("width","100px").css("height","100px").
css("background","blue");
//3.批量设置(建议使用这个)
$("div").css({
width: "100px",
height: "100px",
background: "green"
});
//4.获取CSS样式值
console.log($("div").css("width"));
})
</script>
</head>
<body>
<div></div>
</body>
</html>
可通过控制台来一步一步查看运行效果,若有任何疑问或是不解,请在下方评论,谢谢。