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. 百度地图API的第一次接触——自定义控件

    1.定义一个控件类,即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEF ...

  2. kindle 3 webbrowser破解，

    首先下载破解: http://183.60.157.10/down_group83/M00/06/31/tzydCk3MyHYAAAAAAUTLHFYI-wk8562757/webpatch.7z?k ...

  3. 《TCP/IP详解卷一：协议》 概述

    分层           TCP/IP协议族是一组不同层次上的多个协议的组合.TCP/IP通常被认为是一个四层次协议系统.   链路层(数据链路层或网络接口层):通常包括操作系统中的设备驱动程序和计算 ...

  4. bzoj4176

    莫比乌斯反演 根据约数和个数公式 $ans = \sum_{i=1}^{n}\sum_{j=1}^{n}\sum_{x|i}\sum_{y|j}{[gcd(i, j)==1]}$ 交换枚举顺序 $an ...

  5. Python list的定义和删改

    需要用到list.取回参数 .  sys.argv返回的是个元组. 最后发现用for循环好像没用. a=0 for i in sys.argv[1:]: qh[a]=sys.argv[a] a=a+1 ...

  6. jvm虚拟机androidy移植－编译篇

    有这个必要吗?都过时的东西了,android上的Dalvik效率不够高吗,不够逼格吗? 是的但有总东西是不是我们这些码农能决定的,领导和项目需求才是你要关心的,毕竟工作要向领导汇报,项目要去挣钱钱,但 ...

  7. MAF框架的使用限制

    虽然MAF实现了插件式开发,动态热插拨,AppDomain隔离等诸多优点,但是正因为它复杂的功能机制也带来了很多其它方面的使用限制,下面列出官方给出的MAF框架的使用限制. 1) 在应用主程序显示的插 ...

  8. Linux&nbsp;shell脚本全面学习

    Linux shell脚本全面学习 1. Linux 脚本编写基础 1.1 语法基本介绍 1.1.1 开头 程序必须以下面的行开始(必须方在文件的第一行): #!/bin/sh 符号#!用来告诉系统它 ...

  9. 面试问题 - C# 接口和抽象类的区别

    这个问题基本上可以说是 面试时的必问问题 C# 中的接口和抽象类 相同点: 1. 都不能直接实例化,都可以通过继承实现其抽象方法 2. 都是面向抽象编程的技术基础,实现了诸多的设计模式 不同点: 1. ...

  10. 特性attribute,声明和使用attribute,应用attribute,AOP面向切面,多种方式实现AOP

    1 特性attribute,和注释有什么区别2 声明和使用attribute3 应用attribute4 AOP面向切面5 多种方式实现AOP ---------------------------- ...