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. 「SDOI 2009」Elaxia的路线

    发现自己这几天智商完全不在线-- 这道题的数据十分的水,怎样都可以艹过去-- 开始想了一个完全错误的算法,枚举一对点,判断这一对点是否同时在两条最短路上,是就用两点之间的路径更新答案.显然这样是错的: ...

  2. certbot申请SSL证书及中间证书问题

    首先是到https://certbot.eff.org/上申请证书,由于我们使用的web服务器是基于erlang的cowboy的,在主页上没有选项可以支持,因此在Software下拉项中选择" ...

  3. 四连测Day4

    四连爆炸 卡我常数 好像被AluminumGod拉到了创客...哇我这个天天爆炸的水平可能会被其他三位dalao吊起来打 orz Edmond-Karp_XiongGod orz Deidara_Wa ...

  4. Gym-101630C：Connections（生成树&构造）

    题意:给定N点,M条有向边,满足任意点可以到达任意点.现在叫你保留2*N边,任然满足任意点可以到达任意点,输出删除的边. 思路:从1出发,DFS,得到一颗生成树,有N-1条边.反向建题.还是从1出发, ...

  5. 递归------python实现列表创建二叉树

    # -*- coding:utf-8 -*- '二叉树结点类' class TreeNode: def __init__(self, x): self.val = x self.left = None ...

  6. Vijos:P1117数的划分

    描述 将整数n分成k份,且每份不能为空,任意两份不能相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5; 1,5,1; 5,1,1;问有多少种不同的分法. 格式 输入 ...

  7. 【转】Android Menu

    Menu由两种形式,Option menu和Context menu.前者是按下设备的Menu硬按钮弹出,后者是长按widget弹出. Option Menu 当我们按下Menu的硬件按钮时,Opti ...

  8. JavaScript高级程序设计学习笔记第六章--面向对象程序设计

    1.ECMAScript没有类的概念,ECMA-262 把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”,有点类似于散列表 2.ECMAScript 中有两种属性:数据属性和访问 ...

  9. day1 java基础回顾-多线程

    启动线程方式 方式一:继承Thread. 1. 自定义一个类继承Thread类. 2. 重写Thread的run方法,把自定义线程的任务代码定义在run方法上. 3. 创建Thread子类的对象,并且 ...

  10. Unobtrusive Javascript有三层含义

    一是在HTML代码中不会随意的插入Javsscript代码,只在标签中加一些额外的属性值,然后被引用的脚本文件识别和处理: 二是通过脚本文件所增加的功能是一种渐进式的增强,当客户端不支持或禁用了Jav ...