JavaScript 获取元素尺寸、定位与窗口距离属性汇总

JavaScript 元素尺寸与窗口定位属性详解

获取元素实际尺寸时，element.clientWidth 返回不含边框的宽度，element.clientHeight 返回不含边框的高度。若需包含边框，应使用 element.offsetWidth 获取含边框宽度，element.offsetHeight 获取含边框高度。关于滚动区域，element.scrollWidth 经测试为元素实际宽度减去滚动条宽度，element.scrollHeight 为元素实际高度减去滚动条高度。定位方面，element.offsetLeft 和 element.offsetTop 通常相对于父对象；但在IE浏览器中，若元素 position 设为 relative，则相对于 window 定位。此外，window.screenLeft 仅适用于IE，表示当前窗口距屏幕的距离；window.screenX 适用于非IE浏览器，功能相同。窗口大小方面，window.innerWidth 和 window.outerWidth 仅适用于非IE浏览器，分别表示窗口内部和外部大小。最后，window.screen.width 获取当前屏幕分辨率，window.screen.availWidth 获取屏幕可用分辨率。