1. 首頁 > 生活 > >

jquery添加style樣式 jquery修改css樣式屬性

小知識

【jquery添加style樣式 jquery修改css樣式屬性】


文章插圖
jquery添加style樣式 jquery修改css樣式屬性

文章插圖
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="http://img.hubeilong.com/220623/0Z2451193-1.jpg"></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="http://img.hubeilong.com/220623/0Z2451193-1.jpg"></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="http://img.hubeilong.com/220623/0Z2451193-1.jpg"></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="http://img.hubeilong.com/220623/0Z2451193-1.jpg"></script></head><body> <div id="mochu">飛鳥慕魚博客<br/>http://www.feiniaomy.com</div> <script> $('#mochu').css({'color':'red','heigth':'40px','width':'40px'}); </script></body></html>在瀏覽器中審核元素，如下圖
可以發現，對過JQ設置的CSS屬性都寫到了DIV上
注意：利用JQ的CSS()方法設置或添加多個CSS屬性的時候，要以{”:”,”:”}這種數據格式寫入 。