【JS中innerHeight/Width、clientHeight/Width和offsetHeight/Width使用及其详解】

Linxuejie_1030

已于 2022-01-20 10:36:12 修改

阅读量2.8k

点赞数 2

分类专栏： JS 文章标签： javascript css 前端

于 2022-01-19 20:02:05 首次发布

本文链接：https://blog.csdn.net/Linxuejie_1030/article/details/122582777

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、innerHeight和innerWidth的详解

首先这两个属性是比较特殊的，只能由浏览器使用的。
通过控制台打印来显示它们两的值（没有添加滚动条的情况）。

使用：window.innerHeight、window.innerWidth
大小：浏览器显示内容的高度/宽度+下侧滚动条(x轴)高度/右侧滚动条(y轴)宽度
数学意义：浏览器显示部分包括滚动条的高度/宽度

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    
    <script>
        console.log( "Height:" + window.innerHeight );
        console.log( "Width:" + window.innerWidth );
    </script>
</body>
</html>

打印情况如下：
在这里插入图片描述
---------------------------------------------分割线-----------------------------------------------

我们知道一般情况下，下侧滚动条是不会出现的，这时候我们通过对其添加样式来添加滚动条，并与上面的（没有添加滚动条）比较打印的结果。

CSS代码如下：

body {
    overflow-x: scroll;
    overflow-y: scroll;
}

JS代码如下：

console.log( "Height:" + window.innerHeight );
console.log( "Width:" + window.innerWidth );

打印情况如下（这里把x轴和y轴的滚动条也截进来以方便说明）：
在这里插入图片描述

通过上述的说明，我们可以更深刻的了解到innerHeight和innerWidth的使用及其大小。
另外说明：这个window.innerHeight和innerWidth的大小会根据具体显示器和具体浏览器放大缩小所变化，它所打印的仅仅只是当前浏览器窗口大小所对应的高度，单位是px（像素）。

二、clientHeight和clientWidth的详解

使用：document.documentElement.clientHeight、obj.clientWidth
大小：
clientHeight = 当前对象 Height + padding-top + padding-bottom - x轴滚动条高度
clientWidth = 当前对象 Width + padding-left + padding-right - y轴滚动条高度
数学意义：浏览器或者对象除去滚动条的内容块的高度/高度

我们先来比较一下
document.documentElement.clientHeight和window.innerHeight的差别：

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        body {
            overflow-x: scroll;
            overflow-y: scroll;
        }
    </style>
</head>
<body>

    <script>
        console.log( "window.innerHeight:" + window.innerHeight );
        console.log( "window.innerWidth:" + window.innerWidth );

        console.log( "document.documentElement.clientHeight" + document.documentElement.clientHeight);
        console.log( "document.documentElement.clientWidth" + document.documentElement.clientWidth);

    </script>
</body>
</html>

控制台打印结果：
在这里插入图片描述

我们可以看到不管是宽度还是高度都相差了21px，这是滚动条带来的差异，但是并不是都是21px具体像素差异得看滚动条的设置和计算机浏览器默认滚动条宽度。

接下来我们来讨论正常标签对象使用clientHeight和clientWidth是怎么样的呢~

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #wrap {
            width: 100px;
            height: 100px;
            /* 用于clientWidth加的 */
            padding-left: 50px;
            padding-right: 40px;
            /* 用于clientHeight加的 */
            padding-top: 30px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="wrap"></div>

    <script>
		//获取对象
        var oWrap = document.getElementById("wrap");

		// 打印clientHeight和clientWidth
        console.log( "wrap不加滚动条的情况，高度=" + oWrap.clientHeight );
        console.log( "wrap不加滚动条的情况，宽度=" + oWrap.clientWidth );

    </script>
</body>
</html>

控制台打印结果：
在这里插入图片描述

从上面的描述中，我们也可以简单的验算一下：
wrap的高度=100+30+20=180、wrap的宽度=100+50+40=190
那如果加了滚动条的情况呢？接下来我们给ID="wrap"的标签对象添加上x轴和y轴的滚动条。

CSS代码如下：

 #wrap {
     width: 100px;
     height: 100px;
     /* 用于clientWidth加的 */
     padding-left: 50px;
     padding-right: 40px;
     /* 用于clientHeight加的 */
     padding-top: 30px;
     padding-bottom: 20px;
           
     //给wrap添加x轴和y轴的滚动条 
     overflow-x: scroll;
     overflow-y: scroll;
}

控制台打印结果：
在这里插入图片描述

可以看到和刚刚相比，还是少了21px也就是滚动条带来的减少。

三、offsetHeight和offsetWidth的详解

使用：document.documentElement.offsetHeight、obj.offsetWidth
大小：
offsetHeight = 当前对象 Height + padding-top + padding-bottom +border-top + border-bottom
offsetWidth = 当前对象 Width + padding-left + padding-right + border-left + border-right
数学意义：标签对象的总占用的高度/宽度，比内容块clientHeight/Width
多一个视觉上的border

我们先来讨论标签对象的offsetHeight和offsetWidth

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        body {
            overflow-x: scroll;
            overflow-y: scroll;
        }
        #wrap {
            width: 100px;
            height: 100px;
            /* 用于offsetWidth加的 */
            padding-left: 50px;
            padding-right: 40px;
            border: solid;
            border-left-width: 35px;
            border-right-width: 25px;
            /* 用于offsetHeight加的 */
            padding-top: 30px;
            padding-bottom: 20px;
            border-top-width: 15px;
            border-bottom-width: 5px;
        }
    </style>
</head>
<body>
    <div id="wrap"></div>

    <script>
        // 获取对象
        var oWrap = document.getElementById("wrap");
		
		//控制台打印
        console.log( "wrap.offsetHeight=" + oWrap.offsetHeight );
        console.log( "wrap.offsetWidth=" + oWrap.offsetWidth );

    </script>
</body>
</html>

控制台打印结果：
在这里插入图片描述

注意：！！！这里的border如果设置成transparent(透明)或者unset(不设置)或者压根就没设置border，则并不会加上border，实际的大小和clientHeight或者clientWidth相同，因此前面黄色字体的视觉上非常重要！！！

最后最后，讲到这里，你们应该对这些属性都有了大致的了解了，希望大家都能一起进步哦~

Linxuejie_1030

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
【JS中innerHeight/Width、clientHeight/Width和offsetHeight/Width使用及其详解】

JS中innerHeight/Width、clientHeight/Width、offsetHeight/Width属性详解
复制链接

扫一扫