JavaScript 常用属性总结

phpwsl  发布于 2018-08-27 15:26:57    48

scrollLeft(重点):设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop(重点):设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetHeight: offsetHeight 的值等于元素本身的 高+边框2+内边距2

offsetWidth: offsetWidth 的值等于元素本身的 宽+边框2+内边距2

offsetLeft(重点):HTML 元素间隔左方或外层元素的位置,返回的是数字

offsetTop(重点):HTML 元素间隔上方或外层元素的位置,返回的是数字

scrollHeight 文档左边滚动条的高度

event.clientX(重点) 相对文档的水平座标

event.clientY(重点) 相对文档的垂直座标

event.offsetX(重点) 相对元素本身的水平坐标

event.offsetY(重点) 相对元素的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值,不兼容chrome

document.body.scrollTop 垂直放心滚动的值,不兼容IE与FF,只兼容chrome

1、offsetLeft

假设 obj 为某个 HTML 元素。

obj.offsetTop 指 obj 间隔上方或上层控件的地位,整型

obj.offsetLeft 指 obj 间隔左方或上层控件的地位,整型

obj.offsetWidth 指 obj 控件自身的宽度,整型

obj.offsetHeight 指 obj 控件自身的高度,整型

offsetTop 可以获得 HTML 元素间隔上方或外层元素的位置,style.top 也是可以的,二者的差别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、若是没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样事理。