js中的各种宽高
之前项目刚写了个判断触底自动加载更多的功能,发现自己对各种宽、高的定义还是很模糊。终于没有偷懒,写了个demo理解了一下。网上也有很多整理好的文章,为了加强下自身记忆,顺便也许能给些建议。
element的一些宽、高属性注:盒子模型: content+padding+margin+border
element.clientWidth =content + 左右padding element.clientHeight = content + 上下padding // 元素的内容部分 + 对应的padding(左右/上下);当外层元素有滚动条时,该值是不包含滚动条的宽度的 // block元素 不设置width的话,默认继承外层元素的宽度 => 因此目标元素的宽 = 外层元素是否有滚动条?(外层元素宽 - 滚动条宽度 - element的左右border - element的左右margin):(外层元素宽 - element的左右border - element的左右margin);如果不设置height,而且padding也为0的话;即使外层元素高度值再大,目标元素的clientHeight仍为0 element.clientLeft = 左border element.clientTop = 上border // 元素的边框宽度 element.scrollWidth = content + 左右padding element.scrollHeight = content + 上下padding // 与元素的clientWidth相同 element.scrollLeft = 超出浏览器部分的最左侧到浏览器最左侧的距离(即为文档卷出浏览器的部分长度) element.scrollTop = 超出浏览器部分的最上侧到浏览器最上侧的距离(即为文档卷出浏览器的部分高度) element.scrollWidth = content + 左右padding element.scrollHeight = content + 上下padding // 与元素的clientWidth相同 element.offsetWidth = content + 左右padding + 左右border element.offsetTop = content + 上下padding + 上下border element.offsetLeft = element最左侧距离(从border外开始)外层元素的距离 element.offsetTop = element最上侧距离(从border外开始)外层元素的距离 // 这个值是固定的,不会随着滚动发生变化
注:ie/chrome/firefox获取body的scrollTop和scrollLeft时,直接用document.body.scrollTop取到的值都是0;要改为document.documentElement.scrollTop;或者使用window.pageXOffset,这个属性兼容性会高一些,ie8以上以及firefox、chrome都支持
window的一些宽、高属性window.innerWidth = 浏览器可视区域的宽度(包含滚动条宽度) window.outerWidth = 浏览器可视区域的宽度(包含滚动条宽度) // 在chrome/firefox上测试 window的innerWidth和outerWidth是一样的 // **ie测试结果有点疑问,还要排查下再来补充** window.screenLeft = 浏览窗口距离屏幕可视区域最左侧的距离 window.screenTop = 浏览窗口(包含顶部地址栏、工具栏)距离屏幕可视区域最上侧的距离 // chrome测试结果,在主屏幕上的结果:screenLeft:0;screenTop:0; //但是在外接显示屏中的浏览器打开就有问题;外接显示屏的距最左侧距离不是从0开始而是从主屏幕的可见区域宽度开始的,因此此时screenLeft的值为主屏幕的宽度;screenTop也一样存在差值;外接显示屏应该也是以主屏幕的边界为参考 // firefox不支持这两个属性 // 在ie中;screenTop的最小值不是0,而是顶部地址栏和工具栏的高度。 window.screenX = 浏览窗口距离屏幕可视区域最左侧的距离 window.screenY = 浏览窗口(包含顶部地址栏、工具栏)距离屏幕可视区域最上侧的距离 // chrome测试结果: 与screenLeft/screenTop测试结果一致 // firefox测试结果: 与chrome的screenLeft/screenTop结果一样 // ie测试结果都为:-8??有点奇怪 window.pageXOffset = 超出浏览器部分的最左侧到浏览器最左侧的距离(即为文档卷出浏览器的部分长度) window.pageYOffset = 超出浏览器部分的最上侧到浏览器最上侧的距离(即为文档卷出浏览器的部分高度) // 在chrome/firefox/ie 上测试;结果都相等,且等价于scrollTop/scrollLeft的值;兼容性要好于scrollTop/scrollLeftscreen的宽/高
screen.width = 屏幕的宽度(分辨率宽) screen.height= 屏幕的高度(分辨率高) // 在chrome/firefox/ie 上测试;结果都相等,屏幕的分辨率,与浏览器窗口大小无关 screen.availWidth = 屏幕的宽度(分辨率宽) screen.availHeight= 屏幕的高度(分辨率高) // firefox/chrome/ie availHeight 与电脑窗口的顶部导航栏和底部导航栏的高度有关(注意不是浏览器内部的导航栏) // availWidth 与电脑窗口的左侧导航/工具栏和右导航/工具栏的高度有关(注意不是浏览器内部的导航栏)点击事件的event对象里的一些宽、高
e.clientX = 当前鼠标距离浏览器最左侧的距离 e.clientY = 当前鼠标距离浏览器最上侧的距离(不包含工具栏、地址栏) // 原点:(0,0) // chrome/firefox/ie 结果一致,主屏与外接屏结果也一致 e.screenX = 当前鼠标距离浏览器最左侧的距离 e.screenY = 当前鼠标距离浏览器最上侧的距离(包含工具栏、地址栏) // 原点:(0,浏览器的工具栏+地址栏的高度+屏幕顶部导航/工具栏的高度(如果有的话)) // chrome/firefox/ie 在主屏上都 = clientX;在外接显示屏中,受主屏幕影响存在偏差 e.offsetX = 当前鼠标距离当前元素最左侧的距离 e.offsetY = 当前鼠标距离当前元素最上侧侧的距离 // chrome/firefox/ie 结果一致,主屏与外接屏结果也一致 e.pageX = 当前鼠标距离浏览器最左侧的距离 e.pageY = 当前鼠标距离浏览器最上侧的距离(不包含工具栏、地址栏) e.x = 当前鼠标距离浏览器最左侧的距离 e.y = 当前鼠标距离浏览器最上侧的距离(不包含工具栏、地址栏) 一般而言(无外接屏幕) e.clientX = e.screenX = e.x = e.pageX;e.clientY = e.screenY = e.Y = e.pageY写在最后的话
心累啊,各种浏览器对一些属性的支持还不一样,结果也不一样;以前框架用得太多,公司这边对兼容性要求也没有很大,所以写法少很少有注重兼容性问题;虽然其中的大部分属性也许一时半会儿用不到,但是捋清楚还是好的,ie的一些测试,等用同事电脑测过再回头改改。嗯,就这样;过程中还是有很大收获的!
相关推荐
sixthelement 2020-04-30
today0 2020-09-22
89520292 2020-09-18
周公周金桥 2020-09-06
bigname 2020-08-25
灵均兰草 2020-08-20
hannuotayouxi 2020-08-20
ChinaWin 2020-08-13
大象从不倒下 2020-07-31
好好学习天天 2020-07-28
powrexly 2020-07-20
AlisaClass 2020-07-19
88530091 2020-07-14
WebVincent 2020-07-09
骆驼的自白 2020-06-26
lanzhusiyu 2020-06-21
Phoebe的学习天地 2020-06-21
诗蕊 2020-06-14
jiedinghui 2020-05-30