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. vim 编辑器IDE版

    wget https://raw.github.com/ma6174/vim/master/setup.sh -O ma6174_vim_setup.sh && bash ma6174 ...

  2. 结合Mysql和kettle邮件发送日常报表_20161001

    十一假期 参加婚礼 稍晚点发博 整体流程步骤是: 写SQL-导出到excel设定excel模板调整格式-设置kettle转换--设置kettle邮件作业--完成 第一.写SQL 保持最近12个周的数据 ...

  3. Tomcat加载servlet类文件

    问题1:tomcat什么时候加载servlet? 有两种情况 一种是启动时加载 一种是请求时加载 第一种是在web.xml中的<servlet>节点下增加类似:<load-on-st ...

  4. SimpliciTI使用

    SimpliciTI组网过程介绍 1.SimpliciTI支持点对点和星形的网络拓扑结构.   下面介绍以AP为中心的SimpliciTI网路协议的星形拓扑结构通信过程 1)当ED节点上电之后就扫描信 ...

  5. session.write类型引发的思考---Mina Session.write流程探索.doc--zhengli

    基于Mina开发网络通信程序,在传感器数据接入领域应用的很广泛,今天我无意中发现一个问题,那就是我在前端session.write(msg)数据出去之后,却没有经过Filter的Encoder方法,同 ...

  6. shell里的` ` $( ) ${ } expr $(( ))

    转自:http://blog.sina.com.cn/s/blog_6151984a0100ekz2.html 所有UNIX命令,要取结果或输出,都要用$( )或反引号` ` tt=` file te ...

  7. JS---分解质因数

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 反射：newInstance()的使用方式

    通过反射创建新的类示例,有两种方式: Class.newInstance() Constructor.newInstance() 以下对两种调用方式给以比较说明: Class.newInstance( ...

  9. AngularJs(Part 5)--与后台联系

    AngularJS内置了$http这个服务来与后台联系.(默认会把接受到的数据转换为json)当然,还有一个$resource来提供与RESTful后台联系的服务. $http服务    $http比 ...

  10. Elasticsearch中提升大文件检索性能的一些总结

       笔者在实际生产环境中经常遇到一些大文件的检索,例如一些书籍内容,PDF文件等.今天这篇博客主要来探讨下如何提升ES在检索大文件的一些性能,经验有限,算是一个小小的总结吧! 1.大文件是多大? E ...