一、直接获取元素样式属性值 –
element.style.width
console.log(div.style.width); // 500px
console.log(parseInt(div.style.width)); // 500
console.log(typeof (div.style.width)); // string
二、Offset 偏移量
offsetWidth
= width + padding + border
offsetHeight
= height + padding + border
console.log(div.offsetWidth); // 560 (500 + 20 + 20 + 10 + 10)
console.log(typeof (div.offsetWidth)); // number
offsetLeft
: 当前元素相对于其定位父元素的水平偏移量
offsetTop
: 当前元素相对于其定位父元素的垂直偏移量
在父盒子有定位的情况下，
offsetLeft == parseInt(style.left)
。注意：
后者只识别行内样式！！！
三、
offsetParent
：获取当前元素的定位父元素
如果当前元素的父元素，有CSS定位那么
offsetParent
获取的是最近的那个父元素
如果当前元素的父元素，没有CSS定位，那么
offsetParent
获取的是 body。
注意：
fixed
的父级是窗口，返回值是
null
四、
offsetLeft
和
style.left
区别
offsetLeft
可以
返回无定位父元素的偏移量
。如果父元素中没有定位，则以
body
为准。
style.left
只能获取行内样式，如果父元素中都没有设置定位，则返回空字符串。
offsetTop
返回的是数字，而
style.top
返回的是字符串，而且还带有单位px
div.offsetLeft = 100;
div.style.left = '100px';
offsetLeft
和
offsetTop
只读
，而
style.left
和
style.top
可读可写
总结：一般用
offsetLeft
和
offsetTop
获取值，用
style.left
和
style.top
赋值
-
style.left
: 只能获取行内样式，获取的值可能为空，容易出现
NaN
-
offsetLeft
: 获取值特别方便，而且是现成的
number
,计算比较方便。它只是读的，不能赋值。
三、Client
clientWidth
: 获取元素的可见宽度（width + padding）
clientHeight
: 获取元素的可见高度（height + padding）
注意
：
clientWidth
和
clientHeight
属性是只读的，不可修改
clientWidth
和
clientHeight
的值都是
不带 px
的，返回的都是一个数字，可以直接进行计算。
console.log(div.clientWidth); // 540 (500 + 20 + 20)
console.log(typeof (div.clientWidth)); // number
但是
加了滚动条就不一样了
，
PC 端浏览器滚动条的默认大小为 17px
console.log(div.clientWidth); // 523 (540 - 17)
clientLeft
和
clientTop
实际上就是盒子上的
border
宽度
console.log(typeof (div.clientLeft) + ':' + div.clientLeft); // number : 10
event
的
clientX
和
clientY
-
e.clientX
: 鼠标距离可视区域左侧距离。 -
e.clientY
: 鼠标距离可视区域上侧距离。
四、Scroll 滚动
window.onscroll()
方法
当鼠标滚轮滚动网页的时候，会触发
window.onscroll()
方法。所以可以用来做滚动监听。
加上滚动条之后
console.log(div.scrollWidth); // 523
scrollTop
: 获取垂直方向上滚动的距离
scrollLeft
: 获取水平方向上滚动的距离
注意：
当某个元素满足
scrollHeight - scrollTop === clientHeight
时，说明垂直滚动条到底了。
当某个元素满足
scrollWidth - scrollLeft === clientWidth
时，说明水平滚动条到底了。
上面两个可以用来判断用户是否滑到底了，如果滑到底了，才进行接下来的表单操作
除了
style
,
crollTop
,
scrollLeft
是可读的，其他都是只读
五、获取 html 文档的方式
获取
html
/
head
/
title
/
body
标签的方法如下：
-
document.documentElement
— 获取 html 标签 -
document.head
— 获取 head 标签 -
document.title
— 获取网页标题 -
document.body
— 获取 body 标签
document.documentElement
表示文档的
html
标签。也即是说，基本结构当中的
html
标签是通过
document.documentElement
访问的，并不是通过
document.html
去访问的。
六、
offset
/
scroll
/
client
的区别
-
offsetWidth
= width + padding + border -
offsetHeight
= height + padding + border -
scrollWidth
= 内容宽度（不包含 border） -
scrollHeight
= 内容高度（不包含 border） -
clientWidth
= width + padding -
clientHeight
= height + padding
offsetTop
/
offsetLeft
:
- 调用者：任意元素。（盒子为主）
- 作用：距离父级盒子中带有定位的距离
scrollTop
/
scrollLeft
：
-
调用者：
document.body.scrollTop
（window调用）（盒子也可以调用，但必须有滚动条） - 作用：浏览器无法显示的部分（被卷去的部分）
clientY
/
clientX
：
调用者：
event
作用：鼠标距离浏览器可视区域的距离（左、上）