js插件jquery可以很方便的對HTML的元素進行操作，比如一些元素的顯示與隱藏，一些元素的動態效果等，今天就說一說通過jquery獲取DIV元素的CSS屬性，以及設置DIV元素的CSS屬性的方法。

jquery獲取DIV元素的CSS屬性值

jq獲取DIV元素的屬性值，可以使用css()方法

例：利用jquery獲取DIV元素的寬

<!DOCTYPE html>
<html>
<head>
 <title>Document</title>
 <style>
 #mochu{
 margin: 10px;
 padding: 10px;
 color: red;
 height: 30px;
 width: 40px;
 }
 </style>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
 <div id="mochu">飛鳥慕魚博客<br/>http://www.feiniaomy.com</div>
 <script>
 var h = $('#mochu').css('width');
 console.log(h);
 </script>
</body>
</html>

打印結果：

40px

例：利用jquery獲取DIV元素的高

<!DOCTYPE html>
<html>
<head>
 <title>Document</title>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
 <div id="mochu">飛鳥慕魚博客<br/>http://www.feiniaomy.com</div>
 <script>
 var h = $('#mochu').css('height');
 console.log(h);
 </script>
</body>
</html>

打印結果：

42px

注意：

1、如果給DIV元素定義了CSS屬性的值，則直接輸出定義的CSS值

2、如果未定義DIV元素的CSS屬性值，則輸出瀏覽器渲染後DIV的默認值

利用jquery設置DIV元素的值

在JQ中可以通過CSS方法獲取DIV元素的CSS屬性值，也可以設置或改變元素的CSS屬性值

例：利用jq改變字體的顏色

<!DOCTYPE html>
<html>
<head>
 <title>Document</title>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
 <div id="mochu">飛鳥慕魚博客<br/>http://www.feiniaomy.com</div>
 <script>
 $('#mochu').css('color','red');
 </script>
</body>
</html>

結果如圖：

註：改變DIV中字體的顏色其實就是給這個DIV加入了一個 color 的CSS屬性，並把屬性值設置成 red（紅色）

在瀏覽器中查看元素就可以發現加入的CSS屬性

例：給DIV元素加入多個CSS屬性

<!DOCTYPE html>
<html>
<head>
 <title>Document</title>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
 <div id="mochu">飛鳥慕魚博客<br/>http://www.feiniaomy.com</div>
 <script>
 $('#mochu').css({'color':'red','heigth':'40px','width':'40px'});
 </script>
</body>
</html>

在瀏覽器中審核元素，如下圖