首頁 > web前端 > js教程 > 原生JS取得元素的位置與尺寸

原生JS取得元素的位置與尺寸

一个新手
發布: 2017-10-18 09:53:39
原創
1359 人瀏覽過

1、內高度、內寬度: 內邊距+ 內容框

clientWidth
clientHeight
登入後複製

2、外高度,外寬度: 邊框+ 內邊距+ 內容框

offsetWidth
offsetHeight
登入後複製

3、上邊框、左邊框

clientTop
clientLeft
登入後複製

4、元素的大小及其相對於視窗的位置

getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距离
//width/height:边框 + 内边距 + 内容框
//top:元素的上边界和父元素上边界的距离
//left:元素的左边界和父元素左边界的距离
//right:元素的右边界和父元素的左边界的距离
//bottom:元素的下边界和父元素上边界的距离
登入後複製

5、上邊偏移量,左邊的偏移量

offsetTop
offsetLest
登入後複製

6.可視區域的大小

document.documentElement.clientWidth
document.documentElement.clientHeight
登入後複製

7、頁面的實際大小

document.documentElement.scrollWidth
document.documentElement.scrollHeight
登入後複製

8、視窗左上角與螢幕左上角的距離

window.screenX、
window.screenY
登入後複製

9、螢幕寬高

window.screen.width
window.screen.height
登入後複製

10、螢幕可用寬高(移除工作列)

window.screen.availWidth
window.screen.availHeight
登入後複製

11、視窗的內高度、內寬度(文件顯示區域+捲軸)

window.innerWidth
window.innerHeight
登入後複製

#12 、視窗的外高度、外寬度

window.outerWidth
window.outerHeiht
登入後複製

以上是原生JS取得元素的位置與尺寸的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板