offsetLeft offsetTop offsetWidth offsetHeight

offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）。

offsetTop:同理是指元素的边框的外边缘距离与已定位的父容器（offsetparent）的上边距离（不包括元素的边框和父容器的边框）。

offsetWidth:描述元素外尺寸宽度，是指元素内容宽度+内边距宽度(左右两个)+边框(左右两个)，不包括外边距和滚动条部分。

offsetHeight:同理 描述元素外尺寸高度，是指 元素内容高度+内边距高度(上下两个)+边框(上下两个)，不包括外边距和滚动条部分。

clientLeft clientTop clientWidth clientHeight

clientLeft:元素的内边距的外边缘和边框的外边缘的距离，实际就是边框的左边框宽度

clientTop:同理边框的上边框的宽度

clientWidth:用于描述元素内尺寸宽度，是指 元素内容+内边距 大小，不包括边框、外边距、滚动条部分

clientHeight:同理 用于描述元素内尺寸高度，是指 元素内容+内边距 大小，不包括边框、外边距、滚动条部分

scrollTop scrollLeft scrollWidth scrollHeight

scrollWidth：内容区域尺寸加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等 !important

scrollHeight：同上

scrollTop：滚动条上方卷去的高度

scrollLeft：滚动条左边卷去的宽度

下面贴上调试代码：

 <style>

         *{margin:0;padding:0;}

         #parent{ position: relative; padding: 10px; margin:30px; background-color:#CCC; border: solid 10px #fbc;}

         #child{ height: 200px; width: 200px; padding: 10px; margin: 30px;border: solid 10px #fbc;background-color:#afb;}

         #parent1{ padding: 10px; background-color: #fc8; width:300px;  height:300px;overflow:auto ;clear:both; }

         #child1 { background-color: #bfc; width: 400px; height: 400px;border: 10px solid  #c8f;}

     </style>

     <body id="body">

     <div id="parent">

         <div id="child">

         </div>

        </div>

     <div id="parent1">

         <div id="child1">

         </div>

     </div>

     <script src="jquery_1.11.3.min.js"></script>

     <script type="text/javascript">

         var child = $("#child").get(0);

         console.log($("#child"))//获得对象

         console.log(child)//获得DOM元素

         //$("#child")是一个对象 此处要获得DOM元素  因此要加get(0)

         //get()是获取所有DOM元素的集合  因此加get(0)

 //        console.log( "offsetParent: " + child.offsetParent.id);

 //        console.log( "offsetHeight: " + child.offsetHeight);

 //        console.log( "offsetWidth: " + child.offsetWidth);

 //        console.log( "offsetLeft: " + child.offsetLeft);

 //        console.log( "offsetTop: " + child.offsetTop);

 //---------------------------------------------------------------- 

 //        console.log( "clientHeight: " + child.clientHeight);

 //        console.log( "clientWidth: " + child.clientWidth);

 //        console.log( "clientLeft: " + child.clientLeft);

 //        console.log( "clientTop: " + child.clientTop);

 //---------------------------------------------------------------- 

         var parent1 = $("#parent1").get(0);

 //        console.log( "clientHeight: " + parent1.clientHeight);

 //        console.log( "clientWidth: " + parent1.clientWidth);

         console.log( "scrollHeight: " + parent1.scrollHeight);

         console.log( "scrollWidth: " + parent1.scrollWidth);

 //

 //       $("#parent1").scroll(function(){

 //               var scrollTop = document.documentElement.scrollTop||document.body.scrollTop

 //               var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft

 //            console.log( "scrollTop: " + parent1.scrollTop);

 //            console.log( "scrollLeft: " + parent1.scrollLeft);

 //        })

     </script>

     </body>

注：此文为原创，如需转载请注明出处。

js和jq中常见的各种位置距离之offsetLeft/clientLeft/scrollLeft （一）的更多相关文章

  1. js和jq中常见的各种位置距离之offsetLeft和position().left的区别（四）

    offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left ...

  2. js和jq中常见的各种位置距离之offset和offset()的区别（三）

    offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offset().left:返回的是相对于当前文档的坐标,使用o ...

  3. js和jq中常见的各种位置距离之offset()和position()的区别（二）

    offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...

  4. HTML中常见的各种位置距离以及dom中的坐标讨论

    最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的 ...

  5. Ajax 请求头中常见content-type

    四种常见的 POST 提交数据方式 HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范.规范把 HTTP 请求分为三个部分:状态行.请求头.消息主体.协议规定 POST ...

  6. js中常见的问题

    js中常见的问题 原文链接 1.js获取select标签选中的值 原生js var obj = document.getElementByIdx_x(”testSelect”); //定位id var ...

  7. JS：JS中常见的 “函数名 is not a function” 错误

    js中常见的错误,例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外,还有一种很奇怪的情况:函数本身没有错,但是运行时就是不能正常运行.这种 ...

  8. JS中常见设计模式总结

    github: https://github.com/14glwu/FEInterviewBox/tree/master/JS%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F ...

  9. js从数组中删除指定值（不是指定位置）的元素

    RT: js从数组中删除指定值的元素,注意是指定值,而不是指定位置. 比如数组{1,2,3,4,5},我要删除其中的元素3,但是这个3的位置我是不知道的,只知道要删除值为3的这一个元素,请问要怎么写? ...

随机推荐

  1. 阿里大于短信服务_异常_01_InvalidTimeStamp.Expired

    一.异常信息 dm.aliyuncs.com InvalidTimeStamp.Expired Specified time stamp or date value is expired. 二.异常原 ...

  2. TCP协议与流通信

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! TCP(Transportation Control Protocol)协议与IP ...

  3. visual studio code使用MSVC编译C++

    环境 OS::Microsoft Windows [Version 10.0.17134.285] x64 VSC:Version:1.27.2 (system setup) VS:2017 心血来潮 ...

  4. bzoj3312

    K个硬币,要买N个物品. 给定买的顺序,即按顺序必须是一路买过去,当选定买的东西物品序列后,付出钱后,货主是不会找零钱的.现希望买完所需要的东西后,留下的钱越多越好,如果不能完成购买任务,输出-1 $ ...

  5. BZOJ_1818_[Cqoi2010]内部白点 _扫描线+树状数组

    BZOJ_1818_[Cqoi2010]内部白点 _扫描线+树状数组 Description 无限大正方形网格里有n个黑色的顶点,所有其他顶点都是白色的(网格的顶点即坐标为整数的点,又称整点).每秒钟 ...

  6. HL7 ADT Message Sample

    http://pixpdqtests.nist.gov:8080/#tests%2Fdriver%2Fversion.htm 可以打开上述连接, 选中version和actor, 然后获取对于samp ...

  7. SpringMVC之六：Controller详细介绍

    一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Mo ...

  8. Go 方法和接口

    转自:http://studygolang.com/topics/549 Go 没有类,但可以在结构体类型上定义方法. package main import ( "fmt" &q ...

  9. phpstudy配置php7.1.11

    php7.1.11下载地址 http://windows.php.net/download/ 下载之后,解压. 重名的为php-7.1.11-nts 移动到phpStudy的php目录下 然后重启ph ...

  10. php查询内存信息

    php查询内存信息,是为了更好的查看内存使用情况,更好的优化代码. 查看当前内存使用情况使用:memory_get_usage()函数. 查看内存使用峰值:memory_get_peak_usage( ...