JS中獲取元素的尺寸及位置

2021-08-01 09:25:11 字數 1013 閱讀 9221

js中獲取元素的尺寸及位置

1.    clientwidth

a)    作用:獲取元素視覺化寬度

b)    注意:clientwidth=width+padding

2.    clientheight

a)    作用:獲取元素視覺化高度

3.    offsetwidth

a)    作用:獲取元素寬度

b)    注意:offsetwidth=width+padding+border

4.    offsetheight

a)    作用:獲取元素高度

5.    獲取元素寬度和高度的注意事項

a)    如果要獲取頁面的寬度通常用clientwidth和clientheight,如果要獲取頁面中某個元素的寬度和高度,可以用offsetwidth和offsetheight

b)    如果要獲取頁面的寬度,需要用

頁面寬度=document.documentelement.clientwidht || document.body.clientwidht

頁面高度=document.documentelement.clientheight ||document.body.clientheight

6.    offsetparent

a)    作用:獲取元素位移的參照物

b)    注意:

i.         如果元素沒有父元素或父元素沒有定位,那麼返回值就是body

ii.         如果有父元素,且父元素有定位,那麼返回值就是具有定位的父元素

iii.         如果有多個祖先元素具有定位,那麼返回值就是離它最近的且具有定位屬性的祖先元素

7.    offsettop:子元素相對於參照物頂端距離

8.    offsetleft:子元素相對於參照物左側距離

9.    clientwidth、clientheight、offsetwidth、offsetheight、offsettop、offsetleft都是數值型

前端js 獲取元素位置 元素尺寸

獲得元素相對于父元素的座標top值 x yjs var y document.getelementbyid y console.log y.offsetleft 此時獲得值為y距離網頁左邊的距離,會隨著頁面大小而改變全頁面 半頁面 有定位是顯示的是距離前乙個有定位元素的距離 其中距離中不包含邊框 獲...

js 獲取DOM尺寸 位置

檢視滾動條的滾動位置 封裝相容性方法getscrolloffset function getscrolloffset else 檢視視覺化視窗的尺寸 document.documentelement.clientwidth clientheight document.body.clientwidth...

元素的尺寸和位置

1 clientwidth clientheight 元素的可視部分的寬度和高度 也就是css的width加padding 它們不把邊框和滾動條計算在內,也不包括任何可能的滾動。若css中沒有指定元素的高度和寬度 即自適應 則ie中顯示0,而非ie瀏覽器則顯示實際的值 2 offsetwidth o...