關於jquery的位置以及尺寸操作

2021-07-24 17:45:19 字數 1485 閱讀 3472

關於尺寸操作:

1.  height()與width()設定或者返回元素的高度與寬度,返回結果是數值型別。

設定的時候可以傳入」100px」或者100.eg

: width(「100px」)||width(100)

$(window).height();

//獲取當前螢幕高度,相當於原生的clientheight

2.  innerwidth()與innerheight()

//包括padding + width

設定方法同上,不過傳入的值是由padding+width組成的,所以傳入數值後的width度值會等於傳入數值減去設定的padding值。

3.  outerwidth()與outerheight()

//包括border + padding + width

設定方法同上,width的值會變成傳入的值減去border 和 padding

備註: outerwidth()可以傳入boolean值作為引數,傳入true的話代表包括margin,預設為false;

關於位置操作

1.  scrolltop() 獲取或者設定元素垂直方向滾動的位置

$(selector).scrolltop()// 獲取被捲曲的高度

eg: $(

window).scrolltop();

$(selector).scrolltop(100)// 設定,引數為數值型別

eg:$(

window).scrolltop(100)

scrollleft() 獲取或者設定元素水平方向滾動的位置。方法同上

2.

offset 獲取或設定元素相對於document左上角的位置

$(selector).offset()//獲取 返回值為{left: num,top: num}

$(selector).offset()//設定

$(selector).offset().top//獲取元素到頁面頂部的距離

備註: 在使用offset設定值的時候,如果這時候元素的position沒有進行設定(預設是static),則瀏覽器會自動將其轉變為position: relative;並相應的修改其left和top值。

3.  position() 獲取相對於其最近的定位的父元素的位置,相當於原生js中的offsettop 和offsetleft.

$(selector).position();//獲取 返回值為{left: num, top : num}

獲取其中的left值為$(selector).position().left;

備註:position方法只能獲取,不能設定;

jQuery 尺寸 位置操作

jquery中分別為我們提供了兩套快速獲取和設定元素尺寸和位置的api,方便易用,內容如下。jquery 尺寸操作包括元素寬高的獲取和設定,且不一樣的api對應不一樣的盒子模型。語法 演示 function 注意 有了這套 api 我們將可以快速獲取和子的寬高,至於其他屬性想要獲取和設定,還要使用 ...

jQuery尺寸和位置操作

1.width height 獲取匹配元素的寬度和高度值,只有width height 2.innerwidth height 獲取包含padding的高度和寬度值 3.outerwidth outheight 獲取包含padding border的寬度和高度值 4.outerwidth true ...

22 jQuery位置和尺寸操作的方法

offset coordinates position scrolltop val 下一節說 scrollleft val 下一節說 doctype html en utf 8 22 jquery位置和尺寸操作的方法 title father son style js jquery 1.12.4.j...