<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<style>
#box{
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="box" style="width: 100px"></div>
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</body>
</html>
<script>
// css() 行内和非行内的都可以获取
console.log($('#box').css('width'))
console.log($('#box').css('height'))
console.log($('#box').css('background-color'))
// css() 设置样式
$('#box').css('width','200px')
$('#box').css('height',200)
$('#box').css('background-color','red')
$('ul li').css('color','blue') //隐式迭代（不用主动遍历）
// css({}) 批量设置样式
$('ul li:eq(3)').css({width:200,height:200,backgroundColor:'yellow'})
</script>
