08-jQuery的位置信息

jQuery的位置信息跟JS的client系列、offset系列、scroll系列封裝好的一些簡便api.

 

1、寬度和高度

獲取寬度

.width()

描述：爲匹配的元素集合中獲取第一個元素的當前計算寬度值。這個方法不接受任何參數。.css(width) 和 .width()之間的區別是後者返回一個沒有單位的數值（例如，400），前者是返回帶有完整單位的字符串（例如，400px）。當一個元素的寬度須要數學計算的時候推薦使用.width() 方法 。

設置寬度

.width( value )

描述：給每一個匹配的元素設置CSS寬度。

 

高度

獲取高度

.height()

描述：獲取匹配元素集合中的第一個元素的當前計算高度值。

• 這個方法不接受任何參數。

設置高度

 .height( value )

描述：設置每個匹配元素的高度值。

 

二、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外部高度。

 

 

三、偏移

獲取

.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 )

描述：設置每一個匹配元素的垂直方向滾動條位置。