原生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...