本文原文链接：https://blog.csdn.net/xzk9381/article/details/112189175
在 jQuery 中，使用 css 方法可以设置元素的 CSS 样式。
一、获取元素的样式
在原生的 JS 中，需要使用 getComputedStyle() 方法来获得元素的样式值，例如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a {
width: 200px;
height: 200px;
transition: 0.7s;
}
.b {
background: #ccc;
}
.c {
box-shadow: 0 0 10px black;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
onload = function (){
console.log(getComputedStyle(mydiv)['backgroundColor']);
console.log(getComputedStyle(mydiv)['width']);
}
</script>
</head>
<body>
<div id='mydiv' class="a b"></div>
</body>
</html>
在 jQuery 中，将原生的方法封装到 css() 方法中，所以可以直接使用 css() 方法来获取元素属性：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a {
width: 200px;
height: 200px;
transition: 0.7s;
}
.b {
background: #ccc;
}
.c {
box-shadow: 0 0 10px black;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
console.log($('#mydiv').css('width'));
console.log($('#mydiv').css('backgroundColor'));
})
</script>
</head>
<body>
<div id='mydiv' class="a b"></div>
</body>
</html>
需要注意的一点，css() 方法获取元素属性值时，如果元素的属性值单位是 cm 时，则会自动转换为 px；
二、设置元素的样式
使用 css() 方法可以为元素设置单个样式：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('#mydiv').css('width','100px');
})
</script>
</head>
<body>
<div id='mydiv'></div>
</body>
</html>
如果要设置多个样式，可以使用链式调用的方法：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('#mydiv').css('width','100px').css('height','100px').css('background','red');
})
</script>
</head>
<body>
<div id='mydiv'></div>
</body>
</html>
不过链式调用的方法过于麻烦，所以还可以使用传递 JSON 对象的方式：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('#mydiv').css({
'width':'100px',
'height':"100px",
'background':'#ccc'
});
})
</script>
</head>
<body>
<div id='mydiv'></div>
</body>
</html>
本文原文链接：https://blog.csdn.net/xzk9381/article/details/112189175