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. 37）PHP，获取数据库值并在html中显示（晋级2）

    下面的是上一个的改进版,我知道为啥我的那个有问题了,因为我的__construct()这个函数的里面的那个变量名字搞错了,哎,这是经常犯得毛病,傻了吧唧,气死我了. 之前的那个变量的代码样子: cla ...

  2. 一个搜索框的小demo

    一.实时按照输入的搜索值显示与其匹配的内容,隐藏其它内容 <%@ Page Language="C#" AutoEventWireup="true" Co ...

  3. 在VMware装了linux系统，如何在windows系统中用xshell连接

    网上有好几种方法,不过我觉得这种比较简单 1.找到VMware菜单  打开 编辑>虚拟网络编辑器 如图: 点下面的更改设置 点确定就可以了,什么都不用改.然后回到linux系统中ifconfig ...

  4. 提高线程数，解决redis超时问题

    根据压测结果做出的修改历史: 第一步:只针对maxWorkerThreads.maxIoThreads和minWorkerThreads做了修改<processModel autoConfig= ...

  5. Elasticsearch Rest模式和RPC模式性能比较

    Elasticsearch 有两种链接模式,即Rest方式(对应端口9200)和RPC方式(对应端口9300)这两种访问效率到底差多少,在同样的业务逻辑下,测试了一波. 用的JMeter进行压力测试 ...

  6. IntelliJ的.iml文件及相关的Class Not Found 问题

    .iml 文件是IntelliJ IDEA 自动创建的模块文件,用于Java应用开发,存储一些模块开发相关的信息,比如一个Java组件, 插件组件,Maven组件等等, 还可能会存储一些模块路径信息, ...

  7. Xen入门系列二【使用 virt-install 安装虚拟机】

    系统环境:Centos 6.5 + Xen4Centos安装方式 相关链接:Xen4Centos方式安装Xen请查看:http://www.cnblogs.com/hackboy/p/3662432. ...

  8. 78）PHP，编写session存储机制（将数据写进数据库）的代码整理（未实验）

    <?php function userSessionBegin() { echo '<br>Begin<br>'; //初始化数据库服务器连接,这个函数是最先执行,所以, ...

  9. 对Java8新的日期时间类的学习（二）

    示例11 在Java中如何判断某个日期是在另一个日期的前面还是后面 这也是实际项目中常见的一个任务.你怎么判断某个日期是在另一个日期的前面还是后面,或者正好相等呢?在Java 8中,LocalDate ...

  10. 深入探讨Java中的异常与错误处理

    Java中的异常处理机制已经比较成熟,我们的Java程序到处充满了异常的可能,如果对这些异常不做预先的处理,那么将来程序崩溃就无从调试,很难找到异常所在的位置.本文将探讨一下Java中异常与错误的处理 ...