JavaScript CSSOM视图模式

最新推荐文章于 2024-10-09 00:58:21 发布

D_SJ

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量112

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c6bba4a6fb9a049d05e4ca5

版权

Window视图属性。window.innerWidth：窗口的内部宽度，不包括用户界面元素，比如窗框。window.innerHeight：窗口的内部高度。IE8以下不兼容。
Document文档视图。document.documentElement.clientWidth：浏览器窗口可视宽度。document.documentElement.clientHeight：浏览器窗口可视高度。跟文档相关的，滚动条不属于文档内容（滚动条属于浏览器，属于窗口内容）

可视区域的宽高。ele.clientWidth：width+padding。ele.clientHeight：height+padding。不包含子元素。
盒子整体的宽高。ele.offsetWidth：width+padding+border。ele.offsetHeight：height+padding+border。不包含子元素。
盒子的实际宽高。ele.scrollWidth(自定义滚动条)：paddingLeft+width+超出部分。ele.scrollHeight(自定义滚动条)：padding+height+超出部分。
左值和上值。ele.clientLeft：内容区到盒子最左边的距离（实际上是左边框的宽度）。ele.clientTop：内容区到盒子最上边的距离（实际上是上边框的宽度）。ele.offsetParent：最近的定位父级。ele.offsetLeft：获取元素距离最近的定位父级的左边距离。ele.offsetTop：获取元素距离最近的定位父级的上边距离。
滚动宽，滚动高。ele.scrollLeft：水平滚动条的值。ele.scrollTop：垂直滚动条的值。可读可写，有内容溢出元素才有效果。设置时不能给px 单位，否则会出错。document.documentElement.scrollLeft：文档水平滚动条。document.documentElement.scrollTop：文档垂直滚动条。

ele.getBoundingClientRect()：得到矩形元素的界线，返回的是一个对象，包含 top, left, right, bottom四个属性值，大小都是相对于浏览器窗口top,left 的距离。
ele.scrollIntoView()：让元素滚动到可视区域（HTML5标准),参数 true 与浏览器对齐，false元素在窗口居中显示。
e.clientX、e.clientY：相对于window，为鼠标相对于浏览器窗口的偏移。event.clientX鼠标在文档的水平坐标。event.clientY 鼠标在文档的垂直坐标。

document.onmousemove = function (e) {
    console.log(e.clientX,e.clientY)
}
复制代码

关注