一些属性和方法，在dom中没有规定如何确定页面中元素大小的情况下诞生。。。

1.偏移量（offset dimension）

测试代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>offset偏移量学习</title>

         <meta name="author" content="郭菊锋/702004176@qq.com"/>

         <style type="text/css">

             #a{

                 height: 300px;width: 300px;

                 border: 1px solid red;

                 -webkit-box-sizing: border-box;

                 -moz-box-sizing: border-box;

                 box-sizing: border-box;

                 padding: 10px 0;

                 margin: 10px 0;

                 overflow: scroll;

             }

             #a p{height: 450px;}

         </style>

     </head>

     <body>

         <div id="a" style="">

             <p></p>

         </div>

     </body>

 </html>

js代码：

 <script type="text/javascript">

             var a= document.getElementById('a');

               console.log(a.offsetHeight);

             console.log(a.clientHeight);

 </script>

获取理论结果：

//offsetWidth  包括padding和border，不包括滚动条，滚动条是默认在宽度中的。

几种情况——
//加了boxsizing的情况：  offsetWidth值  =  style的宽度值,
//不加boxsizing的情况 :   offsetWidth值  =  style中的宽度  +  padding左右值  +  border左右值。

//有无滚动条不受影响

//height同理

以上理论，经测在谷歌和火狐中都适用。

offsetLeft 和 offsetTop

offsetLeft/offsetHeight是元素的左边框/上边框到其最近的、具有大小的元素左边框/上边框的距离。

具体值还是取决于他的offsetParent。

心中有个概念，但是最终解释还是看不同情况下的结果：

2.客户区大小（client dimension）

指的是元素内容及其内边距所占据的空间大小，从字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内【js高级程序设计文摘】

测试offsetWidth顺便测试的clientWidth的

clientWidth  永远会减去滚动条的尺寸和border的尺寸，只包括内容和padding的。!! 即使加了box-sizing=border-box也不包括border，

几种情况——
//加了box-sizing:   clientWidth值就是  =  style中的宽度 - border宽度，
//不加box-sizing:   clientWidth值就是  =  style中的宽度 + padding左右值。

//有滚动条情况：clientWidth值  =  （style中的宽度 + padding左右值）- 17px（滚动条的宽度值）；
//滚动条加box-sizing情况:  clientWidth值  =  style中的宽度 - 17px（滚动条的宽度值）- border的左右宽度值

//height同理

以上理论，经测在谷歌和火狐中都适用。

3.scrollHeight（client dimension）

scrollHeight返回元素的完整的高度,以像素为单位

JS-元素大小深入学习-offset、client、scroll等学习研究笔记的更多相关文章

  1. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  2. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  3. 元素大小-偏移量（offset）客户区大小（client）滚动大小（scroll)

    一.偏移量---offset 1.定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetPar ...

  4. js 元素offset,client , scroll 三大系列总结

    1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...

  5. js 元素大小缩放实例

    元素大小缩放是一套连贯事件,按下鼠标不放,拖动鼠标 然后松开. 按下鼠标事件 当按下鼠标时,记录元素大小.鼠标按下的位置.状态位. 拖动鼠标事件 当鼠标拖动时,计算元素调用后的大小. 元素调整后大小 ...

  6. js中 offset /client /scroll总结

    offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...

  7. offset client scroll

    offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...

  8. bom中的offset,client,scroll

    简单明了

  9. JS 中的offset、scroll、client总结

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

随机推荐

  1. netfiler/iptables

    一. 什么是netfilter netfilter is a set of hooks inside the Linux kernel that allows kernel modules to re ...

  2. linux并发concurrency控制

    解决竞态(race conditions)最根本的途径是对共享资源的互斥访问,访问共享资源的代码区被称为临界区(critical sections),对临界区的代码需要以某种互斥机制加以保护.常见的互 ...

  3. eclipse中maven打包

    第一种方式:将依赖包打包进一个jar包中. <build> <plugins> <plugin> <artifactId>maven-compiler- ...

  4. shell命令之根据字符串查询文件对应行记录

    显示xxx字符串对应的行数,并向前打印3行,向后打印2行,查找对应文件为filename.txt 命令:grep -n 'xxx' -A3 -B2 --color=auto filename.txt ...

  5. Elasticsearch5.X IN Windows 10 系列文章（5）

    ElasticSearch版本: 5.5.1 (最新稳定版为5.5.2),由于用到IK中文分词插件,最新版本没有5.5.2 ,所以使用5.5.1 日期:2017-08-31 第五章:Kibana 安装 ...

  6. /etc/fstab文件损坏怎么办

    第一步首先关机挂载磁盘 第二步开机启动从BIOS,关键字F2 第三步光盘启动进入救援模式 第四步vi /mnt/sysimagimage/etc/fstab ,编辑完exit退出,reboot 进入光 ...

  7. C++对析构函数的误解

    C++析构前言 析构函数在什么时候会自动被调用,在什么时候需要手动来调用,真不好意思说偶学过C++…今日特此拨乱反正. C++析构误解正文 对象在构造的时候系统会分配内存资源,对一些数据成员进行初始化 ...

  8. Ubuntu之音效调节

    sudo add-apt-repository ppa:nilarimogard/webupd8 sudo apt-get update sudo apt-get install pulseaudio ...

  9. BCM_SDK命令

    启动bcm的sdk,会进入一个类似shell的交互界面,在其中如入命令,可以配置交换机芯片.本文主要记录一下命令: 1.端口限速命令 2.链路聚合命令 3.i2c控制命令 启动方法: /tmp/bcm ...

  10. Spring 4 官方文档学习（十一）Web MVC 框架之URI Builder

    http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-uri-building ...