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. laravel学习笔记(三)

    模型传值 路由: Route::get('/posts/{post}','\App\Http\Controllers\PostController@show'); 方法: public functio ...

  2. PMP项目管理学习笔记(6)——整合管理之制订项目管理计划

    制订项目管理计划 输入:项目章程.组织过程资产.企业环境要素.计划过程的输出(): 工具:专家判断 输出:项目管理计划 项目管理计划使你在问题发生之前做出规划 你要在计划过程组中明确如何完成项目——因 ...

  3. Win2D 入门教程 VB 中文版

    继续填坑!又一个c#教程变为vb! 这是我翻译的Win2D教程,链接保留了微软原版的. 如果文档有问题,可以在 https://github.com/Nukepayload2/Win2dDocVB发 ...

  4. 关于sigleton模式

    单例模式的要点有三个:一是某个类只能有一个实例:二是它必须自行创建这个实例:三是它必须自行向整个系统提供这个实例. 从具体实现角度来说,就是以下三点:一是单例模式的类只提供私有的构造函数,二是类定义中 ...

  5. 图片充当li标签列表标志

    默认情况下,浏览器使用一个黑圆圈作为列表标志,可以用图片取代它: ul {list-style: none} ul li{ background-image: url("img/logo_0 ...

  6. ios7与ios6UI风格区别

    http://apple.xdnice.com/content/applenews/2013/0614/142195.html         (ios7 ui风格) http://blog.csdn ...

  7. 第三天,小作业,表达式,while循环

    num += 1 等价于 num = num + 1num -= 1 等价于 num = num - 1num *= 2 等价于 num = num * 2num /= 2 等价于 num = num ...

  8. java.sql.SQLException: Data truncated for column 'lastSeason' at row 1

    在使用项目将数据存储到 datetime 的字段 ,抛出了这个异常 而我是使用Java.util.Date 存储过去的 解决代码如下: Date date = new Date(); demo.set ...

  9. 用cpp写对拍程序

    #include <bits/stdc++.h> using namespace std; int main() { while(true) { puts(""); p ...

  10. You Are the One (区间DP)

    The TV shows such as You Are the One has been very popular. In order to meet the need of boys who ar ...