offsetwidth详解_offsetWidth和它的兄弟姐妹们

最新推荐文章于 2024-01-24 17:15:09 发布

weixin_39905500

最新推荐文章于 2024-01-24 17:15:09 发布

阅读量2.4w

点赞数 11

文章标签： offsetwidth详解

我们在取元素的宽度时脑海里就能想起如offsetWidth、 clientWidth、 scrollWidth 、style.width，那它们有什么区别呢？先看一下官方定义：

一、HTMLElement.offsetWidth是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。

var offsetWidth = element.offsetWidth;
// 这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用element.getBoundingClientRect().

备注：offsetWidth是一个DHTML对象模型中的属性，由微软IE浏览器首次引入。有时候它也可以称为一个元素的物理或图形尺寸，或者<border-box>（译者注：即CSS3中的border-box模型）的宽度。

二、HTMLElement.clientWidth 属性表示元素的内部宽度，以像素计。内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。Element.clientWidth 该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

var intElemClientWidth = element.clientWidth;
// 该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用 element.getBoundingClientRect()。

三、HTMLElement.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如::before或::after。如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth。

var xScrollWidth = element.scrollWidth;
// xScrollWidth 的值是元素的内容宽度
// 这个属性会进行四舍五入并返回整数，如果你需要小数形式的值，使用element.getBoundingClientRect().

例如：https://jsbin.com/jenuhobela/edit?html,js

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style>
        div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            border: 1px solid red;
        }
        
        #aDiv {
            width: 100px;
            border: 1px solid blue;
        }
        
        button {
            margin-bottom: 2em;
        }
    </style>
</head>

<body>
    <div id="aDiv">
        FooBar-FooBar-FooBar-FooBar
    </div>
    <button id="aButton">
        Check for overflow
    </button>
    
    <div id="anotherDiv">
        FooBar-FooBar-FooBar-FooBar
    </div>
    <button id="anotherButton">
        Check for overflow
    </button>
    <script>
      var buttonOne = document.getElementById('aButton'),
          buttonTwo = document.getElementById('anotherButton'),
          divOne = document.getElementById('aDiv'),
          divTwo = document.getElementById('anotherDiv');

          //check to determine if an overflow is happening
          function isOverflowing(element) {
            console.log(element.scrollWidth, 'scrollWidth')
            console.log(element.offsetWidth, 'offsetWidth')
            return (element.scrollWidth > element.offsetWidth);
          }

      function alertOverflow(element) {
        if (isOverflowing(element)) {
          console.log('Contents are overflowing the container.');
        } else {
          console.log('No overflows!');
        }
      }

      buttonOne.addEventListener('click', function() {
        alertOverflow(divOne);
      });  

      buttonTwo.addEventListener('click', function() {
        alertOverflow(divTwo);
      });
    </script>
</body>
</html>

MDN 上对以上3属性有绝妙的总结：

如果你需要知道元素总共占用了多少空间，包括可视内容、滚动条（如果有的话）、内边距和边框的宽度，你会使用 offsetWidth和offsetHeight属性；（简单说offsetWidth是border+(若有)scrollbar+padding+width值之和）

如果你需要知道展示区域内容占用了多少空间，包括内边距但是不包括边框、外边距或者滚动条，你会使用clientWidth和clientHeight属性；（简单说clientWidth是padding+width值之和）

如果你想要知道内容区域的实际大小，而不局限于可见区域的话，你会使用 scrollWidth和scrollHeight属性。即使使用了滚动条仅有部分内容可见，这两个属性仍会返回元素的完整内容宽高；例如，一个300x300像素的滚动盒子里放置了一个600x400像素的元素，scrollWidth将会返回600，scrooHeight返回400.

最后补充：style.width仅能返回当样式写在行内的时候以style方式定义的内部样式表的width属性值。style.width获取的元素宽度只是content的宽度，不包括border、和padding所占的宽度，且宽度值是带单位px的。style.width也可以在js中用来设置元素的宽度，而offsetWidth不可以。当样式写在样式表中时，如＃box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度，而style.width所返回的值为空。例如：https://jsbin.com/jihaqagule/1/edit?html,js,output

本文引用参考：

HTMLElement.offsetWidthdeveloper.mozilla.org

Determining the dimensions of elementsdeveloper.mozilla.org

scrollWidth、clientWidth、offsetWidth、width的区别www.jianshu.com

基于js中style.width与offsetWidth的区别(详解)_javascript技巧_脚本之家www.jb51.net

weixin_39905500

关注

11
点赞
踩
36

收藏

觉得还不错? 一键收藏
0
评论
offsetwidth详解_offsetWidth和它的兄弟姐妹们

我们在取元素的宽度时脑海里就能想起如offsetWidth、 clientWidth、 scrollWidth 、style.width，那它们有什么区别呢？先看一下官方定义：一、HTMLElement.offsetWidth是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上...
复制链接

扫一扫