眼花缭乱 原文地址:→传送门 window相关宽高属性1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度)
参考链接: 2. window.innerHeight (浏览器窗口的视口的高度)和 window.innerWidth
参考链接: 3. window.screen.width和window.screen.height
参考链接: 4. window.screen.availHeight和window.screen.availWidth
参考链接: 5. window.screenTop和window.screenLeft
参考链接: document下面的相关属性(offset/client/scroll)与client相关属性6. document.body.clientWidth或element.clientWidth
参考链接: 7. document.body.clientHeight或element.clientHeight
参考链接: 8. document.body.clientLeft或element.clientLeft
9. document.body.clientTop或element.clientTop
参考链接: 与offset相关属性
10. document.body.offsetWidth或element.offsetWidth
11. document.body.offsetHeight或element.offsetHeight
12. HTMLElement.offsetLeft和HTMLElement.offsetTop
offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)
offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)
offsetLeft=(offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left) 参考链接: 与scroll相关属性13. document.body.scrollWidth及document.body.scrollHeight
scrollWidth = 浏览器窗口宽度scrollHeight = 浏览器窗口高度
scrollWidth = 给定的宽度 + body所有padding + body所有margin + body所有borderscrollHeight = 给定的高度 + body所有padding + body所有margin + body所有border
scrollWidth = 内容的宽度 + body所有padding + body所有margin + body所有borderscrollHeight = 内容的高度 + body所有padding + body所有margin + body所有border 参考链接: 14. element.scrollWidth和element.scrollHeight
scrollWidth = clientWidth = 元素宽度 + padding和 scrollHeight = clientHeight = 元素高度 + padding和
scrollWidth = 实际内容的宽度 + padding和 scrollHeight = 实际内容的高度 + padding和 15. document.body.scrollTop及document.body.scrollLeft
16. window.scrollY及window.scrollX
event中的五种坐标
参考来源: |
|
来自: 昵称39458007 > 《前端》