一、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和clientWidthconsole.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相同，因此前面黄色字体的视觉上非常重要！！！

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

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

JS 中的 event?event:window.event什么意思？求详解。
JS 中的 event?event:window.event什么意思?求详解. 2013-04-16 00:01flying607 | 分类:JavaScript |浏览813次 <script ...
js中unload什么意思_JS之onunload、onbeforeunload事件详解
简介 onunload,onbeforeunload都是在刷新或关闭时调用,可以在 onbeforeunload 是正要去服务器读取新的页面时调用,此时还没开始读取:而onunload则已经从服务器 ...
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
1 escape()函数定义和用法escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法escape(string) 参数描述string 必需.要被转义或编码的 ...
JS 中关于Promise的用法，状态，执行顺序详解，面试可用（原创）
前言在实际项目中我们常会去用已经封装好的promise如axios,或者也会自己去封装promise,甚至在面试中,关于promise的面试题也层出不穷,promise的重要性不言而喻,故写该文章记 ...
html5走格子游戏,JS/HTML5游戏常用算法之碰撞检测地图格子算法实例详解
JS/HTML5游戏常用算法之碰撞检测地图格子算法实例详解发布时间:2020-09-26 20:42:24 来源:脚本之家阅读:112 作者:krapnik 本文实例讲述了JS/HTML5游戏常 ...
html内联元素和块元素的特性,HTML中块级元素和内联元素的特性详解
原标题:HTML中块级元素和内联元素的特性详解在网站布局中经常会遇到元素进行居中的时候,设置了text-align:center:margin:0 auto;有时候会起作用,但有时候对居中无效,刚接 ...
python的继承用法_【后端开发】python中继承有什么用法？python继承的用法详解
本篇文章给大家带来的内容是关于python中继承有什么用法?python继承的用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 面向对象三大特征 1.封装:根据职责将属性和方法 ...
ios开发读取剪切板的内容_iOS中管理剪切板的UIPasteboard粘贴板类用法详解
一.自带剪切板操作的原生UI控件在iOS的UI系统中,有3个控件自带剪切板操作,分别是UITextField.UITextView与UIWebView.在这些控件的文字交互处进行长按手势可以在屏幕视图 ...
c++中.dll与.lib文件的生成与使用的详解
c++中.dll与.lib文件的生成与使用的详解 --------------------------------------------------------------------------- ...
python的继承用法_python中继承有什么用法？python继承的用法详解
本篇文章给大家带来的内容是关于python中继承有什么用法?python继承的用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 面向对象三大特征 1.封装:根据职责将属性和方法 ...

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

目录

一、innerHeight和innerWidth的详解

二、clientHeight和clientWidth的详解

三、offsetHeight和offsetWidth的详解

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

最新文章

热门文章