web前端面试-- window.innerWith、window.outerWidth、clientWidth、offsetWidth、scrollWidth的区别

原创已于 2023-11-23 21:56:16 修改 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

于 2023-11-06 18:01:57 首次发布

前端面试题专栏收录该内容

15 篇文章

订阅专栏

本人是一个web前端开发工程师，主要是vue框架，整理了一些面试题，今后也会一直更新，有好题目的同学欢迎评论区分享 ;-）

web面试题专栏：点击此处

元素

元素属性

1. clientWidth

元素的可见宽度，包括内边距，但不包括元素的边框和滚动条的宽度。
它是元素内容区域的宽度，可以通过CSS的width属性来设置。例如，如果一个div元素的宽度为200px，内边距为10px，那么它的clientWidth就是200px - 2 * 10px = 180px。

2. offsetWidth

元素的可见宽度，包括元素的内容、内边距和边框的宽度。
它是元素在页面上占据的总宽度，包括元素的边框、内边距和内容区域的宽度。例如，如果一个div元素的宽度为200px，内边距为10px，边框为1px，那么它的offsetWidth就是200px + 2 * 10px + 2 * 1px = 222px。

3. scrollWidth

元素内容区域的宽度，包括被隐藏的部分。
它是元素内容区域的总宽度，包括被隐藏部分的宽度。例如，如果一个div元素的宽度为200px，内边距为10px，内容区域的宽度为300px，那么它的scrollWidth就是300px。

编码验证

由于box-sizing: border-box；怪异盒模型，所以总宽度不会被border撑开，还是100px。

dom

<div id="box">Penk666</div>

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#box {
  width: 100px;
  height: 100px;
  font-size: 40px;
  background-color: antiquewhite;
  overflow-x: auto;
  overflow-y: hidden;
  padding:10px;
  border: 10px salmon solid;
}

在这里插入图片描述

分析clientWidth

总宽度100px，减去左右边框各10px，可知道最后clientWidth为80px；
这里需要注意的是overflow-y: hidden; 如果没有设置，会有个滚动条，会挤压可视区域空间！！！
在这里插入图片描述

分析offsetWidth

总宽度100px，不用裁剪，还是100px；
在这里插入图片描述

分析scrollWidth

总宽度是100px，这边只是设置了字体撑开了内容区域，并没有指定内容width，所以只能直接打印了。

在这里插入图片描述

额外：控制台直接查看的方式

打开控制台->Elements->Properties
在这里插入图片描述

Window

Window 窗口属性

在JavaScript中， innerWidth 和 outerWidth 是用来获取浏览器窗口的宽度的属性，它们的区别如下：

1. window.innerWidth

表示浏览器窗口的内部宽度，即浏览器可视区域的宽度，不包括滚动条的宽度。它可以通过 window.innerWidth 来获取。

2. window.outerWidth

表示浏览器窗口的外部宽度，包括浏览器的边框和滚动条的宽度。它可以通过 window.outerWidth 来获取。

图1，window.innerWidth 可以看出是可视区域的width；
在这里插入图片描述

图2，就算是无滚动条，innerWidth 还是比 outerWidth小，除去滚动条，还有浏览器边框。
在这里插入图片描述

例子源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        width: 100%;
        height: 100vh;
        background-color: skyblue;
        padding: 40px;
      }
      .container {
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #box {
        width: 100px;
        height: 100px;
        font-size: 40px;
        background-color: antiquewhite;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px;
        border: 10px salmon solid;
      }
      #box span {
        display: inline-block;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="box"><span>Penk666</span></div>
    </div>
    <div>
      <h2>前提</h2>
      <br />
      <ul>
        <li>window.devicePixelRatio == 1</li>
        <li>
          因为一些属性是获取当前的像素，如果你缩放了页面，会导致结果不一，并不是浏览器兼容问题。
        </li>
        <li>解决办法：ctrl+0</li>
      </ul>
    </div>
    <br />
    <br />
    <div>
      <h2>元素宽度属性</h2>
      <br />
      <ul>
        <li>1. clientWidth: 元素的可见宽度，包括内边距，但不包括元素的边框和滚动条的宽度。</li>
        <li>2. offsetWidth: 元素的可见宽度，包括元素的内容、内边距和边框的宽度。</li>
        <li>
          3. scrollWidth:
          在overflow是scroll的前提下，元素内容区域的宽度，包括被隐藏的部分；如果内容溢出，则是内容溢出导致盒子超出的宽度。
        </li>
      </ul>
    </div>
    <br />
    <br />
    <div>
      <h2>window窗口宽度属性</h2>
      <br />
      <ul>
        <li>
          1. window.innerWidth: 浏览器标签页中可视区域的宽度
          <span style="color: rgb(249, 99, 99)">(网页的宽度)</span>。
        </li>
        <li>
          2. window.outerWidth: 浏览器整体宽度，包括标签栏，状态栏，输入栏之类
          <span style="color: rgb(249, 99, 99)">(浏览器的宽度)</span>...
        </li>
      </ul>
    </div>
  </body>
</html>