JS宽高(client、offset、scroll)的介绍

暮雪初心

问题

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

分析

JS中document对象的宽高有三种,cilentoffsetscroll

client: clientWidth和clientHeight,clientTop和clientLeft

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

  1. 假如元素无padding无滚动
    clientWidth = style.width
  2. 假如元素有padding无滚动
    clientWidth = style.width + style.padding*2
  3. 假如元素有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;
        }
   
        <body>
            <div id="app">
                我是文字<br>
                我是文字<br>
                我是文字<br>
                我是文字<br>
                我是文字<br>
            </div>
        </body>

结果如图:

图片描述

offset:offsetWidth和offsetHeight,offsetTop和offsetLeft

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

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

offsetTop和offsetLeft:这个需要先了解offsetParent,规则如下

  1. 如果当前元素的父级元素没有进行css定位(position为absolute或relative),offsetParent为body
  2. 如果当前元素的父级元素中有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计算规则如下
  1. 无滚动轴时:
    scrollWidth = clientWhidth = style.width + style.padding*2
  2. 有滚动轴时:
    scrollWidth = 实际内容的宽度 + padding*2
    scrollHeight同理

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

图片描述

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

图片描述

更详细的介绍,请点击

阅读 5.5k

前端"坑"货
前端"坑"货
54 声望
0 粉丝
0 条评论
54 声望
0 粉丝
文章目录
宣传栏