005-JQuery之CSS
生活随笔
收集整理的這篇文章主要介紹了
005-JQuery之CSS
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- CSS
- 位置
- 尺寸
?
CSS
- ?css(name|pro|[,val|fn]) ：訪問匹配元素的樣式屬性
示例：
1 // 獲取color樣式屬性的值 2 $(p).css("color"); 3 // 將所有段落的字體顏色設為紅色并且背景為藍色 4 $("p").css({ color: "#ff0011", background: "blue" });?
位置
- offset([coordinates]) ：獲取匹配元素在當前視口的相對偏移，返回的對象包含兩個整型屬性：top 和 left
- position() ：獲取匹配元素相對父元素的偏移，返回的對象包含兩個整型屬性：top 和 left
- scrollTop([val]) ：獲取匹配元素相對滾動條頂部的偏移
- scrollLeft([val]) ：獲取匹配元素相對滾動條左側的偏移
示例：
1 // HTML代碼 2 <p>Hello</p><p>2nd Paragraph</p> 3 4 // 獲取最后一個p的偏移(left:0 top:35) 5 var offset = $("p:last").offset(); 6 alert(offset.left+" | "offset.top); 7 8 // 設置p的偏移 9 $("p:last").offset({ top: 10, left: 30 }); 10 11 // 獲取最后一個p的位置(left:15 top:15) 12 var position = $("p:last").position(); 13 alert(position.left+" | "+position.top); 1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Selecter</title> 5 6 <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script> 7 <style media="screen"> 8 .box{ 9 width:3700px; 10 height:6000px; 11 } 12 .p1{ 13 position: fixed; 14 left: 30px; 15 top:30px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="box"> 21 <p class="p1">text</p> 22 </div> 23 24 <script type="text/javascript"> 25 $(window).scroll(function(){ 26 $(".p1").text($(window).scrollTop()); 27 }); 28 </script> 29 </body> View Code?
尺寸
- ?height([val|fn]) ：獲取當前元素的高度值（px）
- ?width([val|fn]) ：獲取當前元素的寬度值（px）
- ?innerHeight() ：獲取當前元素的內部高度，不包括邊框
- ?innerWidth() ：獲取當前元素的內部寬度，不包括邊框
- ?outerHeight([options]) ：獲取當前元素的外部高度，包括邊框，如果options為true則計算邊距在內
- ?outerWidth([options])?：獲取當前元素的外部寬度，包括邊框，如果options為true則計算邊距在內
示例：
1 // 獲取p的高度 2 $("p").height(); 3 4 // 設置p的高度 5 $("p").height(20); 6 7 // 獲取p的內部高度 8 $("p").innerHeight(); 9 10 // 獲取p的外部高度 11 $("p").outerHeight(true);?
轉載于:https://www.cnblogs.com/agmj117/p/7692210.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的005-JQuery之CSS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Win XP必须禁止的服务
- 下一篇： Bootstrap-CSS：表格