jq：樣式操作（返回css樣式屬性的值、修改屬性的值、設定樣式的方法）
阿新 • • 發佈：2020-08-03
1、操作css樣式
（1）返回css樣式屬性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width: 300px;
height: 300px;
background-color: darkred;
}
只寫了css的屬性名的情況下只返回屬性值
（2）修改屬性的值
<body>
<div></div>
<script>
$(function() {
$("div").css("width","100px");
console.log($("div").css("width"));
})
</script>
</body>- 屬性名必須加引號，不加引號會當做變數處理
- 屬性的值如果是數字可以不加引號
（3）一次修改多個css的樣式（物件的方式）
<body>
<div></div>
<script>
$(function() {
$("div").css({
width:200,
height:200
})
})
</script>
</body>
2、設定樣式的方法
作用等同於classList，可以操作類樣式，注意操作裡面的類樣式不要加點
（1）新增類
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width: 300px;
height: 300px;
}
.back_color{
background-color: darkred;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div></div>
<script>
$(function() {
$("div").click(function(){
$(this).addClass("back_color");
})
})
</script>
</body>
</html>
（2）刪除類
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
}
.back_color{
background-color: darkred;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="back_color"></div>
<script>
$(function() {
$("div").click(function(){
$(this).removeClass("back_color");
})
})
</script>
</body>
</html>
（3）切換類
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
}
.back_color{
background-color: darkred;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="back_color"></div>
<script>
$(function() {
$("div").click(function(){
$(this).toggleClass("back_color");
})
})
</script>
</body>
</html>