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