獲取元素的寬 高和位置

2021-10-07 15:35:51 字數 2335 閱讀 1294

原生js

ele.getboundingclientrect():獲取乙個元素相對於瀏覽器視口的的座標(無論父元素定位與否),返回乙個object物件,該物件有6個屬性:top/left/right/bottom/width/height。幾乎所有瀏覽器都支援該方法。jquery中沒有直接的方法,需要用$(ele).offset().top-$(document).scrolltop()計算得到。

注意:right是指元素右邊界距視窗最左邊的距離,bottom是指元素下邊界距視窗最上面的距離。

pageyoffset 屬性是scrolly屬性的別名,設定或返回文件在垂直方向滾動的畫素值。window.pageyoffset == window.scrolly;前者瀏覽器相容性更好。

所以獲取元素在頁面文件中的位置:

var x= ele.getboundingclientrect().left+scrolltop;

var y =ele.getboundingclientrect().top+scrolltop;    //在視窗的位置+文件滾動掉的尺寸

為了跨瀏覽器相容,文件卷掉的長度請使用如下方式:

varscrolltop= document.documentelement.scrolltop || window.pageyoffset || document.body.scrolltop;

jquery

1.滑鼠相對於頁面的位置

event.pagex/event.pagey:滑鼠相對於頁面左/上邊緣的距離。

2.元素的位置偏移量

offset():返回包含top和left兩個屬性的物件,相對於document文件的座標

position():返回包含top和left兩個屬性的物件,相對於最近的已定位的包含元素的位置。若無,則相對於document。只對可見元素有效,注意ele也屬於可見元素

3.元素的寬高

width()/height():獲得或設定元素【內容】的寬/高;若元素的display:none,其值為0。

innerwidth()/innerheight():獲得包括內邊距(padding)的元素寬度/高度,不包括邊框;

outerwidth()/outerheight():獲得包括內邊距(padding)和邊框(border)的元素寬度/高度;

outerwidth(true)/outerheight(true):獲得整個元素的寬度/高度,包括外邊距、邊框、內邊距和內容;

注意:1)ele.css("height"):返回帶有完整單位的字串(例如400px),若運算需要parseint轉換。

ele.height():返回乙個沒有單位的number數值(例如400)。

2)height()總是返回內容寬度,不管css box-sizing屬性值。若css box-sizing為border-box,將造成這個函式改變這個容器的outerheight,而不僅是原來的內容高度。

4.瀏覽器相關寬高

$(window).height():獲取瀏覽器可視視窗的高度;

$(document).height():獲取整個網頁文件的高度;當網頁高度不足瀏覽器視窗時,返回的是$(window).height()。

$(document).scrolltop():document元素相對document元素對應的滾動條頂部的垂直偏移量,可獲取已滾動的距離或設定將要滾動的距離。

即:當網頁滾動條拉到最低端時,$(document).height() == $(window).height() + $(window).scrolltop()。

注意:不建議使用$("html").height()、$("body").height()這樣的方法獲取高度,原因有:

$("body").height():body可能會有邊框,獲取的高度會比$(document).height()小;

$("html").height():在不同的瀏覽器上獲取的高度會有差異,瀏覽器不相容。

$(window).height()若返回的不是瀏覽器視窗的高度,可能是網頁沒有加上宣告。

獲取元素寬高

獲取元素寬高值 1.內聯樣式.element.style讀取的只是元素內聯樣式,即寫在元素的 style 屬性上的樣式,支援讀寫.var elebox document.getelementbyid eleid var h elebox.style.height 外聯樣式 巢狀樣式無法通過上述方法直...

獲取元素高寬

element.clientwidth屬性表示元素的內部寬度,以畫素計。該屬性包括內邊距,但不包括垂直滾動條 如果有 邊框和外邊距 element.getboundingclientrect width有內邊距和邊框,無外邊距 element.style.width 只能去內聯樣式的寬window....

Android 獲取控制項的寬高和位置

獲取控制項的絕對位置 包括狀態列 可以用這種方法,呼叫方法後,location 0 和location 1 就分別被賦值了。int location new int 2 view.getlocationonscreen location 獲取控制項的相對與當前視窗的位置可以用getlocationi...