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. [LC] 809. Expressive Words

    Example: Input: S = "heeellooo" words = ["hello", "hi", "helo&quo ...

  2. day12-模块导入

    # 一.import import demo # in demo.py -- 导入demo模块,执行里面的print语句. print(demo.money) # 8000000 -- 打印demo的 ...

  3. PAT甲级——1036 Boys vs Girls

    1036 Boys vs Girls This time you are asked to tell the difference between the lowest grade of all th ...

  4. spring cloud解决eureka的client注册时默认使用hostname而不是ip

    eureka的client注册到server时默认是使用hostname而不是ip.这样的话使用feign client通过eureka进行服务间相互调用时也会使用hostname进行调用,从而调用失 ...

  5. 关于使用MyEclipse自动生成Hibernate和Struts出现的jar不兼容的问题（antlr.collections.AST.getLine()I）

    今天做Hibernate和Struts2结合的练习,使用MyEclipse自动创建Hibernate和Struts的相关配置文件和jar包,写完一个查询方法后,准备测试一下结果,简单的查询那种,很诡异 ...

  6. python语法基础-面向对象-进阶-长期维护

    ###############    @property定义属性    ############## # 所以对于定义属性你有好几种方式了和种类了,# 静态属性,动态属性, # property # ...

  7. 深入JVM内核--GC算法和种类

    GC的概念 Garbage Collection 垃圾收集 1960年 List 使用了GC Java中,GC的对象是堆空间和永久区 引用计数法 老牌垃圾回收算法 通过引用计算来回收垃圾 使用者 CO ...

  8. SQL提高性能

    1.对外键建立索引,大数据量时性能提高明显(建索引可以直接[Merge Join],否则还须在查询时生成HASH表作[Hash Join]) 2.尽量少使用inner join,使用left join ...

  9. 设置Fiddler来抓取Android接口数据

    1.下载安装fiddler,安装包可自行百度.安装完成打开fiddler 2.将Fiddler设置远程访问PC 选择Fiddler->Tools->Fiddler Option 3.选择C ...

  10. SpringBoot打印MyBatis sql日志输出

    SpringBoot打印MyBatis sql日志输出 默认情况下mybatis是不开启SQL日志输出,需要手动配置 方法一:(在mybatis整合在springboot框架的情况下) 只需要在配置文 ...