本文介绍了网页标签的height属性，包括如何设置和计算标签的高度，并提及了浏览器窗口的高度属性window.xxx。同时，文章还探讨了鼠标事件触发时的坐标属性event.xxx。附带了一个测试界面代码，供读者在Chrome环境下进行学习和测试。
测试界面代码在文末
关于标签高度属性介绍
以height进行记录 (width计算方式默认相同，若width计算方式不同会单独列出。)
| 属性 | 介绍 |
|---|---|
clientHeight |
可见区域高度 content + padding - 内部scroll高度(chrome下scroll测试为17px) |
scrollHeight |
包括被隐藏内容的所有展示区域高度 （无论是否含有滚动条overflow:scroll/hidden） |
scrollTop/Left |
（纵向/横向）滚动条滚动的高度 含有DTD时最外部滚动条使用html高度document.documentElement 不含DTD时最外部滚动条使用body高度document.body |
offsetHeight |
标签的像素高度。 简单来说就是含border以内的高度。 |
offsetTop/Left |
返回离上层最近元素（被定位父元素或table、td、th、body元素）的Top/Left距离。 从子元素border线至目标元素border线高度。 |
关于载体(浏览器)高度window.xxx属性介绍
| 属性 | 介绍 |
|---|---|
screen.availHeight |
屏幕可用工作区高度（不含任务栏等高度） |
screen.height |
屏幕分辨率高度 |
screenTop/Left |
载体距可用工作区的 Top/Left 距离 |
关于鼠标事件触发时鼠标坐标event.xxx属性介绍
| 属性 | 介绍 |
|---|---|
clientX/Y |
相对于body可视区域的 x / y 坐标 |
pageX/Y |
包含body被隐藏区域的 x / y 坐标 |
screenX/Y 或 x/y |
距离电脑屏幕的 x / y 坐标 |
offsetX/Y |
相对于被定为父元素的 x / y 坐标 |
测试界面代码
<style>
最低0.47元/天 解锁文章
扫一扫
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
