//下面的都是属于DOM规范的内容
//element指的是元素的DOM,可以是document.body,也可也是document.getxxx()
//element.clientWidth;(元素内部宽度,width+padding)
//element.offsetWidth(元素内部宽度,width+padding+border+scroll)
//element.scrollWidth(返回元素的整体宽度,包括溢出部分)
//element.clientLeft(元素左边框宽度,就是border的宽度)
//element.offsetLeft(元素左边框和最近的定位祖先元素的距离)
//element.scrollLeft(元素左端到可视区域左端的距离)
//event.clientX(鼠标事件相对于整个窗口可视区域的x坐标,不随滚动变化)
//event.offsetX(鼠标事件相对于源元素的x坐标)
//event.pageX(鼠标事件相对于整个文档可视区域的x坐标,随滚动变化,会计算滚动距离,搞清楚与clientX的区别)
//event.screenX(鼠标事件相对于屏幕左侧的X坐标,可以把浏览器窗口化,往右拖动测试)
//element.getBoundingRect()(返回值是一个对象,有上下左右宽高六个属性,元素左边框相对于窗口可视区的距离,
//会包含小数,有可能为负值)
//window.innerWidth:浏览器窗口可视区宽度(和clientWidth的区别是他包含滚动条,不同视口下和clientWidth大小不一样)
//实际使用的时候用两者的最大值(不包括浏览器控制台、菜单栏、工具栏)
//如果其中之一为空就用0替代,避免报错
console.log('滚动条宽度:',document.body.clientWidth-window.innerWidth); //差值即为滚动条宽度
// document是针对DOM的属性,window是针对整个窗口的属性,特征就是包含滚动条,screen是针对整个屏幕的属性
//日常使用
const viewPortWidth=Math.max(document.body.clientWidth || 0,window.innerWidth || 0)
clientWidth,offsetWidth,scrollWidth,clientLeft,offsetLeft,scrollLeft,getBoundingRect()一次理解清楚!!!
最新推荐文章于 2024-08-14 15:45:18 发布