clientWidth和offsetWidth

clientWidth

是一个只读属性，返回元素的内部宽度，该属性包括内边距，但不包括垂直滚动条(如果有)、边框和外边距。

offsetWidth

是一个只读属性，返回一个元素的布局宽度。一个典型的offsetWidth是测量包含元素的边框、水平线上的内边距、竖直方向滚动条(如果有的话)、以及CSS设置的宽度(width)值。
用法：var offsetWidth = element.offsetWidth;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #parent {

            width: 200px;

            height: 200px;

            background-color: red;

        }

    </style>

</head>

<body>

    <div id="parent"></div>

    <script>

        var clientWidth = window.document.getElementById("parent").clientWidth;

        var offsetWidth = window.document.getElementById("parent").offsetWidth;

        console.log(clientWidth);  //200

        console.log(offsetWidth);  //200

    </script>

</body>

</html>

当我们给上面parent元素加上边框内边距时：

 #parent {

            width: 200px;

            height: 200px;

            background-color: red;

            border: 10px solid black;

            padding: 10px;

        }

输出结果为：
// 220
// 240
现在我们给parent加一个子元素，并让滚动条出现，完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #parent {

            width: 200px;

            height: 200px;

            background-color: red;

            border: 10px solid black;

            padding: 10px;

            overflow: auto;

        }

        #son {

            width: 300px;

            height: 300px;

        }

    </style>

</head>

<body>

    <div id="parent">

        <div id="son"></div>

    </div>

    <script>

        var clientWidth = window.document.getElementById("parent").clientWidth;

        var offsetWidth = window.document.getElementById("parent").offsetWidth;

        console.log(clientWidth);

        console.log(offsetWidth);

    </script>

</body>

</html>

显示结果如图：

输出信息如下：
// 205
// 240
对于上述代码作个简要说明，clientWidth值为205是这样计算来的：原本我们设置parent的宽度为200,因为我们设置了父元素overflow:scroll属性出现滚动条后，滚动条宽度被包括在这个设置的宽度之内。chrome浏览器滚动条默认宽度为15，所以parent宽度就只剩185.按照上面clientWidth定义来计算，clientWidth = 185(实际width) + 10(padding) + 10(padding).

未完待续

clientWidth offsetWidth等视窗尺寸的更多相关文章

  1. H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...

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

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

  3. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  4. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  5. scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动（冻结）的效果

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位 ...

  6. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...

  7. clientWidth,offsetWidth,scrollWidth区别

    <html> <head> <title>clientWidth,offsetWidth,scrollWidth区别</title> </head ...

  8. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth具体指完全解释究竟哪里的距离scrollHeight: 获取对象的高度滚动. scrollLe ...

  9. 转 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

随机推荐

  1. 吴裕雄--天生自然python机器学习：KNN-近邻算法在手写识别系统上的应用

    需要识别的数字已经使用图形处理软件,处理成具有相同的色 彩和大小® : 宽髙是32像 素 *32像素的黑白图像.尽管采用文本格式存储图像不能有效地利用内 存空间,但是为了方便理解,我们还是将图像转换为 ...

  2. LeetCode No.103,104,105

    No.103 ZigzagLevelOrder 二叉树的锯齿形层次遍历 题目 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). ...

  3. nginx相关地址

    http://www.nginx.cn/doc/      中文文档 http://nginx.org/en/docs/      英文文档 https://pan.baidu.com/s/1qWAZ ...

  4. iOS UICollectionViewCell 的拖动

    1.长按cell的情况下实现拖动,所以理应想到用长按手势. 2.既然实现移动cell,就要看看UICollectionView 有没有方法或者协议可以移动的.通过查看UICollectionView的 ...

  5. php获取服务器和mysql等信息输出到页面（基于ci框架）

    function show($varName) {    switch($result = get_cfg_var($varName)) {     case 0:      return '< ...

  6. 牛客-小y的盒子

    题目传送门 -------------------稍加观察就会发现,4n - 1就是题目要的答案.至于为什么,看官方的题解.不过这个n非常的大,用正常快速幂解决不了.这道题我学到的就是解决幂非常大的情 ...

  7. js各继承方法的优缺点

    在js中有很多种继承的方法,下面总结这些方法的优缺点. ####1.原型链继承 优点: 非常纯粹的继承关系,实例是子类的实例,也是父类的实例 父类新增原型方法/原型属性,子类都能访问到 简单,易于实现 ...

  8. 92）PHP，cookie代码补充

    (1)Cookie值,仅仅支持字符串类型. (2)Cookie键,可以写成下标数组形式. beifen.php <?php /** * @第一个值是name * @第二个值是value * na ...

  9. Javascript 表达式中连续的 && 和 || 之赋值区别

    为了区分赋值表达式中出现的连续的 ‘&&’和 ‘||’的不同的赋值含义,做了一个小测试,代码如下: function write(msg){     for(var i = 0; i ...

  10. setContext or setCharacterEncoding

    request.setCharacterEncoding()是设置从request中取得的值或从数据库中取出的值response.setContentType("text/html;char ...