JS获取元素宽高详解

clientWidth/clientHeight

读取元素的style的宽高 + padding的宽高

只读属性

跟内容是否超出隐藏，没有一毛钱关系

offsetWidth/offsetHeight

获取对象的width/height大小+ 左右padding大小+ 左右border大小

跟内容是否超出隐藏，没有一毛钱关系、只读属性

scrollWidth/scrollHeight

获取元素的 content的width/height + padding的大小

当内容没有超出，跟clientWidth/clientHeight表现一样。

当内容超出，没有设置超出隐藏时，scrollWidth 是 左padding+内容宽

当内容超出，没有设置超出隐藏时，scrollHeight 是 上padding+内容高

当内容超出，有设置超出隐藏时，scrollWidth 是 padding+内容宽

当内容超出，有设置超出隐藏时，scrollHeight 是 padding+内容高

---

clientTop/clientLeft

获取对象上/左border的宽度，没啥用，不用记

offsetTop/offsetLeft

获取到定位父级顶部距离 / 获取到定位父级左边距离

scrollTop/scrollLeft

获取对象的垂直/水平滚动高

关于窗口的滚动高

document.documentElement.scrollTop/document.documentElement.scrollLeft

设置值的时候，切记不要加单位（例如px）

可以赋值

---

document.body.clientWidth/document.body.clientHeight

获取文档的实际宽高

document.documentElement.clientWidth/document.documentElement.clientHeight

获取可视区宽高（不包括滚动条的宽度）

window.innerWidth/window.innerHeight

获取可视区宽高+滚动条的宽度 ，不兼容IE8 (没多大用)

getBoundingClientRect

返回一个当前调用元素当窗口的各个方位的距离。是一个object对象

scrollIntoView(参数)

参数：

​ boolean：

​ true：将元素滚动到页面的顶部显示

​ false：将元素滚动到页面的底部显示

​ object：

​

事件对象

保留了当前事件的相关信息的对象

如何获取：在事件函数的第一个形参就是了

鼠标事件：

​ altkey

​ cltrlkey

​ shiftkey

​ 以上三个属性表示发生鼠标事件时，各个的按下情况，true=按下，false=没按

​ clientX、clientY: 鼠标事件触发时，鼠标距离可视窗口的坐标

​ pageX、pageY：鼠标事件触发时，鼠标距离文档左边\顶部的坐标

​ screenX、screenY：鼠标事件触发时，鼠标距离桌面显示器左上角的坐标

​ detail：触发鼠标事件时对应的按键 1=左键 0=右键

​ target：事件源

​ type：事件名称

键盘事件：今天先不讲

事件冒泡行为：在页面触发事件时，事件就像一个气泡一样，会“向上”浮动，当气泡走到不同“层级”时，如果该层级的标签有相同的事件，那么就触发该事件。

事件冒泡可以被取消：事件对象.stopPropagation()

与事件冒泡对应的是事件捕获行为, 下下节课

BOM事件

window.onload 整个页面的资源加载完成时触发

window.onscroll 整个窗口被滚动时触发

window.onresize 整个窗口尺寸发生改变时触发