Rumah > hujung hadapan web > tutorial js > 原生JS获取元素的位置与尺寸

原生JS获取元素的位置与尺寸

一个新手
Lepaskan: 2017-10-18 09:53:39
asal
1359 orang telah melayarinya

1、内高度、内宽度: 内边距 + 内容框

clientWidth
clientHeight
Salin selepas log masuk

2、外高度,外宽度: 边框 + 内边距 + 内容框

offsetWidth
offsetHeight
Salin selepas log masuk

3、上边框、左边框

clientTop
clientLeft
Salin selepas log masuk

4、元素的大小及其相对于视口的位置

getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距离
//width/height:边框 + 内边距 + 内容框
//top:元素的上边界和父元素上边界的距离
//left:元素的左边界和父元素左边界的距离
//right:元素的右边界和父元素的左边界的距离
//bottom:元素的下边界和父元素上边界的距离
Salin selepas log masuk

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

offsetTop
offsetLest
Salin selepas log masuk

6、可视区域的大小

document.documentElement.clientWidth
document.documentElement.clientHeight
Salin selepas log masuk

7、页面的实际大小

document.documentElement.scrollWidth
document.documentElement.scrollHeight
Salin selepas log masuk

8、窗口左上角 与 屏幕左上角的 距离

window.screenX、
window.screenY
Salin selepas log masuk

9、屏幕宽高

window.screen.width
window.screen.height
Salin selepas log masuk

10、屏幕可用宽高(去除任务栏)

window.screen.availWidth
window.screen.availHeight
Salin selepas log masuk

11、窗口的内高度、内宽度(文档显示区域+滚动条)

window.innerWidth
window.innerHeight
Salin selepas log masuk

12、窗口的外高度、外宽度

window.outerWidth
window.outerHeiht
Salin selepas log masuk

Atas ialah kandungan terperinci 原生JS获取元素的位置与尺寸 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan