jQuery的位置信息跟JS的client系列、offset系列、scroll系列封裝好的一些簡便api.
一、寬度和高度
獲取寬度
.width()
描述:為匹配的元素集合中獲取第一個元素的當前計算寬度值。這個方法不接受任何參數。.css(width)
和 .width()
之間的區別是后者返回一個沒有單位的數值(例如,400
),前者是返回帶有完整單位的字符串(例如,400px
)。當一個元素的寬度需要數學計算的時候推薦使用.width()
方法 。
設置寬度
.width( value )
描述:給每個匹配的元素設置CSS寬度。
高度
獲取高度
.height()
描述:獲取匹配元素集合中的第一個元素的當前計算高度值。
-
這個方法不接受任何參數。
設置高度
.height( value )
描述:設置每一個匹配元素的高度值。
2、innerHeight()和innerWidth()
獲取內部寬
.innerWidth()
描述:為匹配的元素集合中獲取第一個元素的當前計算寬度值,包括padding,但是不包括border。
ps:這個方法不適用於window
和 document
對象,對於這些對象可以使用.width()
代替。
設置內部寬
.innerWidth(value);
描述: 為匹配集合中的每個元素設置CSS內部寬度。如果這個“value”參數提供一個數字,jQuery會自動加上像素單位(px)
獲取內部高
.innerHeight()
描述:為匹配的元素集合中獲取第一個元素的當前計算高度值,包括padding,但是不包括border。
ps:這個方法不適用於window
和 document
對象,對於這些對象可以使用.height()
代替。
設置內部寬
.innerHeight(value);
描述: 為匹配集合中的每個元素設置CSS內部高度。如果這個“value”參數提供一個數字,jQuery會自動加上像素單位(px)
3.outWidth和outHeight()
獲取外部寬
.outerWidth( [includeMargin ] )
描述:獲取匹配元素集合中第一個元素的當前計算外部寬度(包括padding,border和可選的margin)
-
includeMargin (默認:
false
)類型:Boolean
一個布爾值,表明是否在計算時包含元素的margin值。 - 這個方法不適用於
window
和document
對象,可以使用.width()
代替
設置外部寬
.outerWidth( value )
描述: 為匹配集合中的每個元素設置CSS外部寬度。
獲取外部寬
.outerHeight( [includeMargin ] )
描述:獲取匹配元素集合中第一個元素的當前計算外部高度(包括padding,border和可選的margin)
-
includeMargin (默認:
false
)類型:Boolean
一個布爾值,表明是否在計算時包含元素的margin值。 - 這個方法不適用於
window
和document
對象,可以使用.width()
代替
設置外部高
.outerHeight( value )
描述: 為匹配集合中的每個元素設置CSS外部高度。
3、偏移
獲取
.offset()
返回值:Object 。.offset()
返回一個包含top
和 left
屬性的對象 。
描述:在匹配的元素集合中,獲取的第一個元素的當前坐標,坐標相對於文檔。
注意:jQuery不支持獲取隱藏元素的偏移坐標。同樣的,也無法取得隱藏元素的 border, margin, 或 padding 信息。若元素的屬性設置的是 visibility:hidden
,那么我們依然可以取得它的坐標
設置
.offset( coordinates )
描述: 設置匹配的元素集合中每一個元素的坐標, 坐標相對於文檔。
-
coordinates類型: Object一個包含
top
和left
屬性的對象,用整數指明元素的新頂部和左邊坐標。
例子:
$("p").offset({ top: 10, left: 30 });
4.元素坐標
.position()
返回值:Object{top,left}
描述獲取匹配元素中第一個元素的當前坐標,相對於offset parent的坐標。(offset parent指離該元素最近的而且被定位過的祖先元素 )
當把一個新元素放在同一個容器里面另一個元素附近時,用.position()
更好用。
5.滾動距離
水平方向
獲取:
.scrollLeft()
描述:獲取匹配的元素集合中第一個元素的當前水平滾動條的位置(頁面卷走的寬度)
設置:
.scrollLeft( value )
描述:設置每個匹配元素的水平方向滾動條位置。
垂直方向
獲取:
.scrollTop()
描述:獲取匹配的元素集合中第一個元素的當前遲滯滾動條的位置(頁面卷走的高度)
設置:
.scrollLeft( value )
描述:設置每個匹配元素的垂直方向滾動條位置。