JS宽高（client、offset、scroll）的介绍

mj 发布于2019-08-20 18:21 / 2345人阅读

摘要：问题今日头条的一道笔试题，的区别。结果如图更详细的介绍，请点击

问题

今日头条的一道笔试题，offsetWidth、clientWidth、scrollWidth的区别。

分析

JS中document对象的宽高有三种，cilent、offset、scroll

client： clientWidth和clientHeight，clientTop和clientLeft

clientWidth和clientHeight：该属性指的是元素的可视部分宽度和高度，即padding+content，统分为三种情况:

假如元素无padding无滚动
clientWidth = style.width

假如元素有padding无滚动
clientWidth = style.width + style.padding*2

假如元素有padding有滚动，且滚动是显示的
clientWidth = style.width + style.padding*2 - 滚动轴宽度
clientHeight同理

clientTop和clientLeft ：这一对属性是用来读取元素的border的宽度和高度的

clientTop = border-top 的 border-width

clientLeft = border-left 的 border-width

        body {
            width: 500px;
            height: 500px;
            border: 20px solid red;
            margin: 20px;
            padding: 10px;
        }
        div {
            width: 300px;
            height: 300px;
            margin: 10px;
            padding: 20px;
            border: 20px solid gray;
            overflow: auto;
        }
   
        
            
                我是文字

                我是文字

                我是文字

                我是文字

                我是文字

结果如图:

offset：offsetWidth和offsetHeight，offsetTop和offsetLeft

offsetWidth和offsetHeight：这一对属性指的是元素的border+padding+content的宽度和高度
该属性和其内部的内容是否超出元素大小无关，只和本来设置的border以及width和height有关。统分为三种情况:

假如元素无padding无滚动无border
offsetWidth = clientWidth = style.width

假如元素有padding无滚动有border
offsetWidth = style.width = style.padding*2 + border宽度*2

假如元素有padding有滚动有border，且滚动是显示的
offsetWidth = style.width = style.padding*2 + (border-width)*2
offsetWidth = clientWidth + 滚轴宽度 + border宽度*2
offsetHeight同理

offsetTop和offsetLeft：这个需要先了解offsetParent，规则如下

如果当前元素的父级元素没有进行css定位（position为absolute或relative），offsetParent为body

如果当前元素的父级元素中有ccss定位(position为absolute或relative)，offsetParent取最近的那个父级元素

offsetTop和offsetLeft的计算规则如下：

在IE8/9/10以及chrome中
offsetLeft = (offsetParent的margin-left) + (offsetParent的border宽度) + (offsetParent的padding-left) + (当前元素的margin-left)

在FireFox中
offsetLeft = (offsetParent的margin-left) + (offsetParent的padding-left) + (当前元素的margin-left)
offsetTop同理

style和body代码同上。结果如图：

scroll：scrollWidth和scrollHeight，scrollTop和scrollLeft

scrollWidth和scrollHeight：细分为body和其他元素，这里不对body做介绍(详细介绍请点击)

在某div中scrollWidth和scrollHeight计算规则如下

无滚动轴时：
scrollWidth = clientWhidth = style.width + style.padding*2

有滚动轴时：
scrollWidth = 实际内容的宽度 + padding*2
scrollHeight同理

scrollTop和scrollLeft：这对元素是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的宽度和高度。

style和body代码同上。结果如图：

更详细的介绍，请点击

云服务器 GPU云服务器 js滚动scroll js的课程介绍关于js的介绍 js获取图宽高

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84396.html

JavaScript中的各种宽高属性

摘要：在中，存在着多的关于高度和宽度的属性，比如等等这么多，傻傻分不清也正常啊。第二问题对象的属性引用的是对象，表示该窗口中当前显示文档的。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 评论0 收藏0
JS、jQuery各种宽高属性

摘要：下各种宽高和下宽高分为挂载在对象和对象下的宽高属性，先说下和的区别对象表示浏览器中打开的窗口，对象可以省略，比如可以简写为对象是对象的一部分，那么我们可以写成，浏览器的文档成为对象下的宽高属性浏览器窗口内部宽度浏览器窗口内部高度浏览器窗口外 JS下各种宽高 Window和Document:JS下宽高分为挂载在Window对象和Document对象下的宽高属性，先说下Window和Do...

CntChen 2019-08-22 10:46 评论0 收藏0
网页中的各种上下左右宽高值

三种类型offset client scroll offset 只读属性。 width/height——显示出来的屏幕尺寸 top/left——相对于定位父元素的绝对位置 client 只读属性。 width/height——不带边框的offset，也不包含滚动条宽度 top/left——内边距的外边缘与边框外边缘的距离，通常是边框宽度 scroll width/height——只读，带...

tyheist 2019-08-02 16:11 评论0 收藏0
网页中的各种上下左右宽高值

三种类型offset client scroll offset 只读属性。 width/height——显示出来的屏幕尺寸 top/left——相对于定位父元素的绝对位置 client 只读属性。 width/height——不带边框的offset，也不包含滚动条宽度 top/left——内边距的外边缘与边框外边缘的距离，通常是边框宽度 scroll width/height——只读，带...

EastWoodYang 2019-08-23 16:45 评论0 收藏0
js 获取窗口、屏幕、页面元素宽高+位置（兼容ie）

摘要：获取各种宽高位置先上总结，再细细道来总结获取屏幕宽高总区域可用区域有些手机存在底部任务栏，一般直接用第一个就获取浏览器宽高获取浏览器位置获取页面宽高方法方法移动端，一般用就了获取宽高内部宽高，不包滚动条和整体宽高滚动条含被隐藏的内部 js 获取各种宽高+位置 -- 先上总结，再细细道来总结获取屏幕宽高 window.screen.width / window.scr...

Yuanf 2019-08-22 13:48 评论0 收藏0