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>

效果如图:

《JS宽高(client、offset、scroll)的引见》

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代码同上。效果如图:

《JS宽高(client、offset、scroll)的引见》

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:这对元素是可读写的,指的是当元素个中的内容超越其宽高的时刻,元素被卷起的宽度和高度。

《JS宽高(client、offset、scroll)的引见》

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

《JS宽高(client、offset、scroll)的引见》

更细致的引见,请点击

    原文作者:暮雪初心
    原文地址: https://segmentfault.com/a/1190000010385665
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞