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/ ...
随机推荐
- HDU 5380 Travel with candy (贪心,单调队列)
题意: 有n+1个城市按顺序分布在同一直线上,现在需从0号城市按顺序走到n号城市(保证可达),从0号城市到i号城市需要消耗ai个糖果,每个城市都可以通过买/卖糖果来赚取更多的钱,价格分别是buyi和s ...
- 51nod 1097 拼成最小的数
基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 收藏 关注 设有n个正整数,将它们联接成一排,组成一个最小的多位整数. 例如: n=2时,2个整数32, ...
- how to use Hexo
Hexo is a good tool to build a personal blog.Here are some good reference:1: https://hexo.io/zh-cn/d ...
- Python 中print 和return 的区别
1.print() print()函数的作用是输出数据到控制台,就是打印在你能看到的界面上. 2.return return语句[表达式]退出函数,选择性地向调用方返回一个表达式.不带参数值的retu ...
- svn 设置代理
Memory4Young Do Not Repeat Yourself! SVN —— 如何设置代理 如果在使用SVN下载外网的资源时,出现这样的提示:No such host is known. 或 ...
- delphi jinchengneicun
http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Configuring_the_Memory_Manager https://docs.micros ...
- dockerfile note
dockerfile note reference summary defination docker can build images automatically by reading the in ...
- 数论基础之组合数&计数问题
一.组合数:问题引入:现在有 n 个球,取其中的 k 个球,问一共有多少种方式?答案: 公式直观解释:我们考虑有顺序地取出 k 个球:第一次有 n 种选择,第二次有 n-1 种选择,...,第 k 次 ...
- CF161D Distance in Tree 点分治
题目: 输入点数为N一棵树,求树上长度恰好为K的路径个数 分析: 题目的数据范围不是很紧,点分治也可以过,树形dp也可以过.这里采用点分治做法. 我们只需要单开一个类似于桶的数组,跑点分治套路,统计即 ...
- dll加载遇到的问题
dll加载有两种形式,分别是隐式加载和显式加载. 隐式加载在编译的时候就将dll文件编译到可执行文件中去,程序发布的时候可以不用讲dll带着.缺点是,这样编译出来后,程序会很大. 显式加载是指在程序运 ...