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. codeforces 558B B. Amr and The Large Array(水题)

    题目链接: B. Amr and The Large Array time limit per test 1 second memory limit per test 256 megabytes in ...

  2. JSP常见知识点

    false 7.8 磅 0 2 false false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTa ...

  3. Flashback Database 闪回数据库

    一.  Flashback Database 说明 Flashback Database 功能非常类似与 RMAN 的不完全恢复, 它可以把整个数据库回退到过去的某个时点的状态, 这个功能依赖于 Fl ...

  4. Python实例浅谈之五Python守护进程和脚本单例运行

    一.简介 守护进程最重要的特性是后台运行:它必须与其运行前的环境隔离开来,这些环境包括未关闭的文件描述符.控制终端.会话和进程组.工作目录以及文件创建掩码等:它可以在系统启动时从启动脚本/etc/rc ...

  5. 《SpringBoot揭秘 快速构建微服务体系》读后感（二）

    最简单的springBoot应用 package com.louis.test; import org.springframework.boot.SpringApplication; import o ...

  6. Python中的数据结构和算法

    一.算法 1.算法的时间复杂度 大 O 记法,是描述算法复杂度的符号O(1) 常数复杂度,最快速的算法. 取数组第 1000000 个元素 字典和集合的存取都是 O(1) 数组的存取是 O(1) O( ...

  7. metasploit msfconsole 命令

    metasploit msfconsole 命令 msf > help db_autopwn Commands =================== Command Description - ...

  8. Swoole 协程 MySQL 客户端与异步回调 MySQL 客户端的对比

    Swoole 协程 MySql 客户端与 异步回调 MySql 客户端的对比 为什么要对比这两种不同模式的客户端? 异步 MySQL 回调客户端是虽然在 Swoole 1.8.6 版本就已经发布了, ...

  9. HDU 2112 HDU Today Dij+map转化

    HDU Today 经过锦囊相助,海东集团终于度过了危机,从此,HDU的发展就一直顺风顺水,到了2050年,集团已经相当规模了,据说进入了钱江肉丝经济开发区500强.这时候,XHD夫妇也退居了二线,并 ...

  10. MVC+NHibernate笔记

    Nhibernate 要求model实体类对于lazy="true" ,字段属性前需要加 virtual sqlserver2005和oracle10g的hibernate.cfg ...