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;

其他计算类似。

js的offsetWidth,clientWidth的更多相关文章

  1. offsetWidth clientWidth scrollWidth 的区别

    了解 offsetWidth clientWidth scrollWidth 的区别 最近需要清除区分开元素的width,height及相应的坐标等,当前这篇用来区分offsetWidth clien ...

  2. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

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

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

  4. JS中关于clientWidth offsetWidth scrollWidth 等的含义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  5. JS中关于clientWidth offsetWidth srollWidth等的含义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  6. js中的clientWidth offsetWidth scrollWidth等的含义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  7. JS中关于clientWidth offsetWidth scrollWidth 的区别及意义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  8. JS中关于clientWidth offsetWidth scrollWidth 等的区别

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  9. js利用offsetWidth和clientWidth来计算滚动条的宽度

    原文: http://www.haorooms.com/post/js_scroll_width 参考: https://www.cnblogs.com/benxiaohai-microcosm/p/ ...

随机推荐

  1. webapi参数处理get过个参数

    // GET api/values/5 [HttpGet("{logInName}/{pwd}/{orgId}")] public LogInOutPut Get(string l ...

  2. C# 移动开发 MasterDetailPage 关闭时报错问题

    至上次发表的 MasterDetailPage界面做主App,折腾10天,终于知道问题所在.. 泪奔的是解决这个问题只要一句代码 在MainActivity.cs里 [Activity(Label = ...

  3. yii 和 zend studio 集成

    yii是基于测试驱动的,而zend studio是一个好用的ide.集成就是必须的. 本文适合喜欢使用ide的开发者,vim用户或者文本编辑器使用者请忽略. 本文使用的是最新的zend studio ...

  4. Python 中列表、元祖、字典

    1.元祖: 对象有序排列,通过索引读取读取, 对象不可变,可以是数字.字符串.列表.字典.其他元祖 2.列表: 对象有序排列,通过索引读取读取, 对象是可变的,可以是数字.字符串.元祖.其他列表.字典 ...

  5. 课外作业(建立double类型的小数,按照四舍五入保留2位小数)

    举例:

  6. nodejs 安装 淘宝镜像

    临时使用 npm --registry https://registry.npm.taobao.org install express 2.持久使用 npm config set registry h ...

  7. PHP09 字符串和正则表达式

    学习要点 字符串处理简介 常用的字符串输出函数 常用的字符串格式化函数 字符串比较函数 正则表达式简介 正则表达式语法规则 与perl兼容的正则表达式函数    字符串处理介绍 Web开发中字符串处理 ...

  8. PHP05 PHP语言基础

    学习要点 初识PHP 基础语法 变量 常量 运算符 表达式 学习目标 掌握PHP基础语法 掌握PHP变量 掌握PHP常量 掌握PHP表达式 掌握PHP运算符 初识PHP 第一个PHP程序 编写代码 1 ...

  9. postman使用--批量执行测试用例和数据驱动

    批量执行 在我们测试接口的时候,有时候希望执行所有的测试用例,前面讲的都是测试单个的接口,postman提供了我们批量执行接口的功能 点击Runner 然后我们点击run 执行完会统计出我们的结果,失 ...

  10. SQL Sever中多列拼接成一列值为NULL

    查询出数据 SELECT a.ID AS KYMain_ID , ',' + a.Leader + ',' AS KYMain_Leader , ), b.TaskLeader) FROM TB_KY ...