【html】获取视口大小(clientW&H-offsetW&H)

最新推荐文章于 2024-04-26 14:01:36 发布

小孙小孙睡不醒

最新推荐文章于 2024-04-26 14:01:36 发布

阅读量489

点赞数

文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/sylbiubiubiu/article/details/126650234

版权

本文探讨了浏览器视口的clientWidth和offsetWidth属性在不同元素上的应用，特别是在拖拽框最远滑动距离计算中的角色。window.onload函数中展示了如何获取document.documentElement的clientWidth和offsetWidth，并强调在IE10及以下版本中，根元素的这两个属性与视口大小相同。了解这些差异对于精确布局和交互设计至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

clientWidth:padding-box(可视区域)
offsetWidth:padding-box(可视区域) + border

计算拖拽框的最远滑动距离：容器的clientWidth - 滑块的offsetWidth （因为拖拽框的border在容器里）

    window.onload=function(){
        //documentElement.clientWidth并不是跟标签的可视区域，就是视口的大小;
        var w1 = document.documentElement.clientWidth;
        var w2 = document.documentElement.offsetWidth;
        console.log(w1,w2)
    }

该api是为视口量身定做。
正常元素的clientWidth和clientHeight就是可视区域，但根标签的clientWidth和clientHeight是视口大小。

❕在ie10及ie10以下，根标签的clientWidth和offsetWidth统一被指定为视口的宽度。

❗获取视口大小 document.documentElement.clientWidth; document.documentElement.clientHeight;