JQuery中：

1、width()方法用于获得元素内容所占的宽度；

2、innerWidth()方法用于获得包括内边界（padding）的元素宽度；

算式：innerWidth()=width()+padding(左右)

3、outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度；

算式：outerWidth()=width()+padding(左右)+border(左右)

4、outerWidth()方法的参数为true（如：$(this).outerWidth(true)）则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。

算式：outerWidth()=width()+padding(左右)+border(左右)+margin(左右)

5、同理，innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说：对于同一个元素应该是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);

JS中：

1、div.style.width 用于获得元素内容所占的宽度，等同于JQuery中的width()，style.height同理；

2、div.clientWidth 元素可见区域的宽度，包括内边界（padding），等同于JQuery中的innerWidth()，clientHeight 同理；（不包括滚动条和边框线）

算式：div.clientWidth=div.style.width +padding(左右)

3、div.offsetWidth 元素可见区域的宽度，包括内边界（padding）和边框线(border)，等同于JQuery中的outerWidth()，div.offsetHeight 同理；（包括滚动条和边框线）

算式：div.offsetWidth =div.style.width +padding(左右)+border(左右)

4、div.scrollWidth 元素内正文区域的宽度，有子元素且未超出父元素宽度时或无子元素时，等同于div.clientWidth ，若有子元素且超出父元素宽度，此时宽度为子元素的offsetWidth+父元素的padding(左或右)；div.scrollHeight同理；（不包括滚动条和边框线）

5、scrollLeft:设置或获取位于父元素左边界和子元素中目前可见内容的最左端之间的距离；scrollTop同理。（不包含父级的border宽度）

6、clientLeft: 获取对象的border宽度；clientTop：获取对象的border高度

7、offsetParent :当前对象的上级层对象.

8、offsetLeft ：当前对象到其上级层左边的距离。等同于JQuery中的offset().left。（不包含父级的border宽度）

不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。若上级未指定position样式，则是当前对象到其body左边的距离。

style.left当前对象到其上级层左边的距离。

区别：1)style.left返回值除了数字外还带有单位px；

2)如对象到其上级层左边的距离设定值为百分比，

style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值；

3)如果没有给 HTML 元素指定过 left样式，则 style.left返回的是空字符串；

9、offsetTop :当前对象到其上级层顶部边的距离。等同于JQuery中的offset().top。（不包含父级的border高度）

不能对其进行赋值.设置对象到上级层顶部边的距离请用style.top属性。若上级未指定position样式，则是当前对象到其body顶部的距离。

style.top当前对象到其上级层顶部边的距离。

区别：1)style.top返回值除了数字外还带有单位px；

2)如对象到其上级层顶部边的距离设定值为百分比，

style.top返回此百分比,而offsetTop则返回到其上级顶部边的距离的值；

3)如果没有给 HTML 元素指定过 top样式，则 style.top返回的是空字符串；

注意：如果上级层为body，由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。

windowt和body相关的的一些宽高

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

在一些浏览器中宽高的计算公式

IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

各宽高示意图

代码示例

未指定border、padding时的情况：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="parent" style="background-color: red; width: 300px;height: 300px;overflow: auto;">父级div<div id="sub" style="background-color: rgb(110, 122, 158);width:350px;height:350px;">子级div</div></div><script>console.log("父级div元素输出");var parDiv = document.getElementById("parent");console.log("clientWidth*clientHeight", parDiv.clientWidth + "x" + parDiv.clientHeight);console.log("offsetWidth*offsetHeight", parDiv.offsetWidth + "x" + parDiv.offsetHeight);console.log("scrollWidth*scrollHeight", parDiv.scrollWidth + "x" + parDiv.scrollHeight);console.log("scrollTop*scrollLeft", parDiv.scrollTop + "x" + parDiv.scrollLeft);console.log("style.width*style.height", parDiv.style.width + "x" + parDiv.style.height);console.log("clientLeft*clientTop", parDiv.clientLeft + "x" + parDiv.clientTop);console.log("子级div元素输出");var subDiv = document.getElementById("sub");console.log("clientWidth*clientHeight", subDiv.clientWidth + "x" + subDiv.clientHeight);console.log("offsetWidth*offsetHeight", subDiv.offsetWidth + "x" + subDiv.offsetHeight);console.log("scrollWidth*scrollHeight", subDiv.scrollWidth + "x" + subDiv.scrollHeight);console.log("scrollTop*scrollLeft", subDiv.scrollTop + "x" + subDiv.scrollLeft);console.log("style.width*style.height", subDiv.style.width + "x" + subDiv.style.height);console.log("offsetLeft*offsetTop", subDiv.offsetLeft + "x" + subDiv.offsetTop);</script></body></html>

为两个div增加border、padding时的情况

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="parent" style="background-color: red; width: 300px;height: 300px;border: 1px solid;padding: 3px;margin: 4px;overflow: auto;">父级div<div id="sub" style="background-color: rgb(110, 122, 158);width:350px;height:350px;border: 1px solid;padding: 3px;">子级div</div></div><script>console.log("父级div元素输出");var parDiv = document.getElementById("parent");console.log("clientWidth*clientHeight", parDiv.clientWidth + "x" + parDiv.clientHeight);console.log("offsetWidth*offsetHeight", parDiv.offsetWidth + "x" + parDiv.offsetHeight);console.log("scrollWidth*scrollHeight", parDiv.scrollWidth + "x" + parDiv.scrollHeight);console.log("scrollTop*scrollLeft", parDiv.scrollTop + "x" + parDiv.scrollLeft);console.log("style.width*style.height", parDiv.style.width + "x" + parDiv.style.height);console.log("clientLeft*clientTop", parDiv.clientLeft + "x" + parDiv.clientTop);console.log("子级div元素输出");var subDiv = document.getElementById("sub");console.log("clientWidth*clientHeight", subDiv.clientWidth + "x" + subDiv.clientHeight);console.log("offsetWidth*offsetHeight", subDiv.offsetWidth + "x" + subDiv.offsetHeight);console.log("scrollWidth*scrollHeight", subDiv.scrollWidth + "x" + subDiv.scrollHeight);console.log("scrollTop*scrollLeft", subDiv.scrollTop + "x" + subDiv.scrollLeft);console.log("style.width*style.height", subDiv.style.width + "x" + subDiv.style.height);console.log("offsetLeft*offsetTop", subDiv.offsetLeft + "x" + subDiv.offsetTop);</script></body></html>

JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义相关推荐

js删除网页中图片width 和 height
js删除网页中图片width 和 height 一段代码轻松搞定适用于: 电脑端网页带图片属性导致移动网页显示错位/错误备注: 需搭配jquery.min.js (注!jquery-2.0以上版本 ...
Jquery和JS获取Table中tr标签的值以及赋值问题
Jquery和JS获取Table中tr标签的值以及赋值业务场景:根据类型,给比例赋值,是当前td比例动态变化:废话少说,直接上代码 1.以下是HTML代码; <div class=" ...
node.js ejs_如何在Node.js应用程序中使用EJS模板
node.js ejs by Jennifer Bland 詹妮弗·布兰德(Jennifer Bland) 如何在Node.js应用程序中使用EJS模板 (How to use EJS Templat ...
在Node.js中，如何从其他文件中“包含”函数？
假设我有一个名为app.js的文件. 很简单: var express = require('express'); var app = express.createServer(); app.set( ...
纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
js获取svg中g元素的宽高
这里有一个g元素: <g id="g_main" transform="translate(120,2804.5)"><rect>< ...
js拼装html单引号双引号,js、html中的单引号、双引号及其转义使用
js.html中的单引号.双引号及其转义使用在js中对相关字符做判断或取值的时候很多情况下都会用到这些. ------ 在一个网页中的按钮,写onclick事件的处理代码,不小心写成如下: IE提示 ...
Arcgis for js，Openlayers中加载GeoJSON
概述: 在前文中,讲述了在JAVA环境下如何将shp转换为GeoJSON,在本文,分别讲述在Arcgis for js,Openlayers2和Openlayers3中加载展示GeoJSON. 实现: ...
在Windows,Mac，Linux中快速安装配置Node.js环境，并安装VSCode, 完成Web端恒生交易日接口的图形化展示...
编程课应该怎么制作? 编程的乐趣应来自实用主义,我大学本科第一门Java编程课,几乎劝退了所有同学,因为那些教学代码不实用且无趣,一点图形化的内容都没有,而实用的编程课应早早展现图形化的成果, 于是我 ...

JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义