js元素的offsetWidth与clientWidth很相似,因此放在一起记录。
clientWidth与offsetWidth
clientWidth=元素内容区域宽度+水平内边距padding.
offsetWidth=元素的内容区域宽度+水平内边距padding+边框的宽度。
因此,可以认为:
offsetWidth=clientWidth+边框宽度。
通过实例验证下:
<div style="width:500px;height:300px;background-color:#00f;position:relative;" id="div3">
sdsdsd
<div id="div2" style="width:300px;height:300px;border:10px solid #ccc;background-color:limegreen;padding:10px;">sdsd </div>
</div>
var div2 = document.getElementById("div2");
var clientWidth = div2.clientWidth;
var clientHeight = div2.clientHeight;
console.log("clientHeight:"+clientHeight+" clientWidth:"+clientWidth);
var offsetWidth = div2.offsetWidth;
var offsetHeight = div2.offsetHeight;
console.log("offsetHeight:"+offsetHeight+" offsetWidth:"+offsetWidth);
FF下的console:
aaarticlea/png;base64,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" alt="" />
因,div2的宽度时300px, 且padding为10px,根据以上描述,则clientWidth等于内容区域宽度300+内边距10*2(一个是paddingLeft,一个是paddingRight)=320px;
其他计算类似。
- offsetWidth clientWidth scrollWidth 的区别
了解 offsetWidth clientWidth scrollWidth 的区别 最近需要清除区分开元素的width,height及相应的坐标等,当前这篇用来区分offsetWidth clien ...
- js的offsetWidth,offsetHeight,offsetLeft,offsetTop
js的offsetWidth,offsetHeight,offsetLeft,offsetTop
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...
- JS中关于clientWidth offsetWidth scrollWidth 等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- JS中关于clientWidth offsetWidth srollWidth等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- js中的clientWidth offsetWidth scrollWidth等的含义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- JS中关于clientWidth offsetWidth scrollWidth 的区别及意义
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- JS中关于clientWidth offsetWidth scrollWidth 等的区别
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...
- js利用offsetWidth和clientWidth来计算滚动条的宽度
原文: http://www.haorooms.com/post/js_scroll_width 参考: https://www.cnblogs.com/benxiaohai-microcosm/p/ ...
随机推荐
- js数组引用
总结归纳: 1.普通的赋值是复制栈区内容. 2.基本类型的数据在栈区存放数据自身,var a=b; //a与b无关. 引用类型数据在栈区存放数据地址. var a=b; //a,b联动 3.基本数据 ...
- codevs 1519 过路费
时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题目描述 Description 在某个遥远的国家里,有 n个城市.编号为 1,2,3,…,n.这个国家的政府 ...
- COGS 2111. [NOIP2015普及]扫雷游戏
★ 输入文件:2015mine.in 输出文件:2015mine.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 扫雷游戏是一款十分经典的单机小游戏.在 n 行 ...
- window Chrome 下允许跨域访问服务端接口设置
关闭chrome,使用cmd命令进入chrome安装目录cd C:\Program Files (x86)\Google\Chrome\Application 然后使用命令打开chromechrome ...
- dos command
dos command md 创建目录 rd 删除目录 cd\ 返回到根目录 cd.. 返回到上一级目录 cd 进入指定目录 dir 列出当前目录下的文件夹及文件 echo 文件内容>文件名称. ...
- 普通用户切换到root用户
普通用户切换到root用户首先按组合键 CTRL+ALT+T 进入终端界面,一般终端界面默认为普通用户权限模式,如何从普通用户进入root用户首先重置root密码输入 sudo passwd root ...
- vscode 中文设置
修改设置 语言设置介绍: https://code.visualstudio.com/docs/getstarted/locales 按Ctrl + Shift + P打开命令调色板,然后开始键入“d ...
- ARP 协议
1. 什么是ARP协议? 网络层以上的协议用IP地址来标识网络接口,但以太数据帧传输时,以物理地址来标识网络接口.因此我们需要进行IP地址与物理地址之间的转化.对于IPv4来说,我们使用ARP地址解析 ...
- python-----定制群发微信消息
如何使用表格中的信息群发微信消息? 如何读取csv? → 使用内置模块csv 如何按对应信息发送到微信?→ 使用第三方库wxpy 以下代码素材自取:链接:https://pan.baidu.co ...
- Druid配置
spring-mybatis.xml <!-- 定义数据源Bean --> <!-- Druid --> <bean id="dataSource" ...