在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时，由于这些属性概念较多，加上浏览器之间

实现方式不同，常常会造成概念混淆，经过研究之后，这里来进行一个总结。

第一部分：DOM对象

1.1只读属性

所谓的只读属性指的是DOM节点的固有属性，该属性只能通过js去获取而不能通过js去设置，而且获取的值是只有数字并不带单位的（px,em等），如下：

1）clientWidth和clientHeight

该属性指的是元素的可视部分宽度和高度，即padding+content，如果没有滚动条，即为元素设定的高度和宽度，如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高

css:

  1. <style>
  2.         .one{
  3.             width: 200px;
  4.             height: 200px;
  5.             background: red;
  6.             border: 1px solid #000000;
  7.             overflow: auto;
  8.         }
  9.     </style>

HTML

  1. <body>
  2. <div class="one">
  3.     javascript高级应用<br>
  4.     javascript高级应用<br>
  5.     javascript高级应用<br>
  6.     javascript高级应用<br>
  7.     javascript高级应用<br>
  8.     javascript高级应用<br>
  9.     javascript高级应用<br>
  10.     javascript高级应用<br>
  11.     javascript高级应用<br>
  12.     javascript高级应用<br>
  13.     javascript高级应用<br>
  14.     javascript高级应用<br>
  15.     javascript高级应用<br>
  16.     javascript高级应用<br>
  17.     javascript高级应用<br>
  18.     javascript高级应用<br>
  19.     javascript高级应用<br>
  20.     javascript高级应用<br>
  21. </div>
  22. </body>

js

  1. <script>
  2.         window.onload=function(){
  3.             var oDiv=document.getElementsByTagName('div')[0];
  4.             console.log(oDiv.clientWidth+":"+oDiv.clientHeight);
  5.         }
  6.     </script>

结果：

元素本来设定为宽高都是200，即可视部分宽高都是200，但是由于出现了垂直方向的滚动条，占据了可视部分的宽度，所以clientWidth变成了183，而clientHeight依然是200.

2）offsetWidth和offsetHeight

这一对属性指的是元素的border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关

css和HTML部分同上，js部分如下：

  1.  <script>
  2.         window.onload=function(){
  3.             var oDiv=document.getElementsByTagName('div')[0];
  4.             console.log(oDiv.offsetWidth+":"+oDiv.offsetHeight);
  5.         }
  6.     </script>

最终结果：

可以看到该属性和clientWidth以及clientHeight相比，多了设定的边框border的宽度和高度。

3）clientTop和clientLeft

这一对属性是用来读取元素的border的宽度和高度的。

css

  1.  <style>
  2.         body{
  3.             border: 2px solid #000000;
  4.         }
  5.         .one{
  6.             border: 1px solid red;
  7.             width: 100px;
  8.             height: 100px;
  9.             background: red;
  10.         }
  11.     </style>

html

  1. <body>
  2. <div class="one">
  3. </div>
  4. </body>

js

  1. <script>
  2.     var oDiv=document.getElementsByClassName('one')[0];
  3.     console.log(oDiv.clientLeft+":"+oDiv.clientTop);
    </script>

最终结果：

可以看到div的border被设定了1px的宽，这里显示的就是它的宽度

4）offsetLeft和offsetTop

说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的（position:absolute或者position：relative）父级元素（不仅仅指的是直接父级元素，只要是它的父元素都可以），该父级元素就是当前元素的offsetParent，如果从该元素向上寻找，找不到这样一个父级元素，那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素，相对于其offsetParent左边距离和上边距离，即当前元素的border到包含它的offsetParent的border的距离如下所示：

css

  1.  <style>
  2.         .two{
  3.             position: relative;
  4.             width: 200px;
  5.             height: 200px;
  6.             border: 1px solid green;
  7.         }
  8.         .one {
  9.             width: 100px;
  10.             height: 100px;
  11.             background: red;
  12.             margin: 20px;
  13.             border: 1px solid #000000;
  14.             position: absolute;
  15.             top:20px;
  16.         }
  17.  
  18.     </style>

HTML

  1. <body>
  2. <div class="two">
  3. <div class="one">
  4. </div>
  5. </div>
  6. </body>

js

  1. <script>
  2.     var oDiv=document.querySelector('.one');
  3.     console.log(oDiv.offsetTop+":"+oDiv.offsetLeft);
  4. </script>

最终结果：

这里让div.two相对定位，让div.one绝对定位，所以div.two是one的offsetParent,同时，又给div.one加了一个margin为20px,所以这里它的offsetTop为40，offsetLeft 本来为0，但是加上margin为20之后就变成了20.

5）scrollHeight和scrollWidth

顾名思义，这两个属性指的是当元素内部的内容超出其宽度和高度的时候，元素内部内容的实际宽度和高度，需要注意的是，当元素其中内容没有超过其高度或者宽度的时候，该属性是取不到的。

css

  1.  <style>
  2.         .one{
  3.             width: 100px;
  4.             height: 100px;
  5.             overflow: auto;
  6.         }
  7.     </style>

HTML

  1. <body>
  2. <div class="one">
  3.     我是内容<br>
  4.     我是内容<br>
  5.     我是内容<br>
  6.     我是内容<br>
  7.     我是内容<br>
  8.     我是内容<br>
  9.     我是内容<br>
  10.     我是内容<br>
  11.     我是内容<br>
  12.     我是内容<br>
  13.     我是内容<br>
  14.     我是内容<br>
  15.     我是内容<br>
  16. </div>
  17. </body>

js

  1. <script>
  2.     var oDiv=document.querySelector('.one');
  3.     oDiv.onscroll=function(){
  4.         console.log(this.scrollHeight+":"+this.scrollWidth);
  5.     }
  6. </script>

最终结果

尽管该div的宽高都是100，但是其scrollheight为234显示的是其中内容的实际高度，scrollWidth为83（由于滚动条占据了宽度）

1.2可读可写属性

所谓的可读可写属性指的是不仅能通过js获取该属性的值，还能够通过js为该属性赋值。

1）scrollTop和scrollLeft

这对属性是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。

css和html部分同上，js部分如下：

  1. <script>
  2.     var oDiv=document.querySelector('.one');
  3.     oDiv.onscroll=function(){
  4.         console.log(this.scrollTop+":"+this.scrollLeft);
  5.     }
  6. </script>

最终结果：

由于拖动了滚动条，scrollTop的属性值一直在增大，而水平方向没有滚动条，所以scrollLeft一直为0.

该属性还可以通过赋值内容自动滚动到某个位置，js如下：

  1. <script>
  2.     var oDiv=document.querySelector('.one');
  3.     oDiv.scrollTop=20;
  4.     oDiv.onscroll=function(){
  5.         console.log(this.scrollTop+":"+this.scrollLeft);
  6.     }
  7. </script>

结果如下：

通过直接设定div的scrollTop,让它直接显示在滚动条在20垂直方向上20的位置。

2）obj.style.*属性

对于一个dom元素，它的style属性返回的是一个对象，这个对象中的任意一个属性是可读写的。如obj.style.top,obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px),同时，对于这种方式，

它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。另一方面，这些属性能够被赋值，js运动的原理就是通过不断修改这些属性的值而达到其位置改变的，需要注意的是，给这些属性赋值的时候需要带单位的要带上单位，否则不生效。

第二部分 Event对象

在js中，对于元素的运动的操作通常都会涉及到event对象，而event对象也存在很多位置属性，且由于浏览器兼容性问题会导致这些属性间相互混淆，这里一一讲解。

1）clientX和clientY，这对属性是当事件发生时，鼠标点击位置相对于浏览器（可视区）的坐标，即浏览器左上角坐标的（0,0），该属性以浏览器左上角坐标为原点，计算鼠标点击位置距离其左上角的位置，

不管浏览器窗口大小如何变化，都不会影响点击位置的坐标。

js

  1. <script>
  2.     var oDiv=document.querySelector('.one');
  3.     oDiv.onclick=function(ev){
  4.         var evt=ev||event;
  5.         console.log(evt.clientX+":"+evt.clientY);
  6.     }
  7. </script>

结果：

2）screenX和screenY是事件发生时鼠标相对于屏幕的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为该点的screenX和screenY值，如下所示：

可以看到尽管浏览器窗口被缩到很小，但是坐标值却很大，因为是相对于屏幕坐标而不是浏览器的坐标。

3）offsetX和offsetY

这一对属性是指当事件发生时，鼠标点击位置相对于该事件源的位置，即点击该div，以该div左上角为原点来计算鼠标点击位置的坐标，如下所示：

可以看到，点击该div的靠近左上角处，它的offsetX和offsetY为1,0，需要注意的是，IE，chrome，opera都支持该属性，唯独Firefox不支持该属性，Firefox中与此属性相对应的概念是，event.layerX和event.layerY,所以需要兼容浏览器时，获取鼠标点击位置相对于事件源的坐标的兼容写法为var disX=event.offsetX||event.layerX.

4)pageX和pageY

顾名思义，该属性是事件发生时鼠标点击位置相对于页面的位置，通常浏览器窗口没有出现滚动条时，该属性和event.clientX及event.clientY是等价的，但是当浏览器出现滚动条的时候，pageX通常会大于clientX，因为页面还存在被卷起来的部分的宽度和高度，如下所示：

由于浏览器出现了垂直和水平的滚动条，所以pageX和pageY大于clientX和clientY。

当浏览器的滚动条没有被拖动或者浏览器没有滚动条的时候，两者是相等的。

js中的各种宽高以及位置总结的更多相关文章

  1. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  2. LODOP中的各种宽高和位置简短问答

    LODOP中的位置边距,可查看本博客另一篇相关博文:LODOOP中的各种边距 打印项.整体偏移.可打区域.内部边距关于LODOP中的各种宽高,可查看本博文简短问答下方的正文:.该文其实有两个以前的相关 ...

  3. js中的各种宽高

    在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...

  4. DOM中获取宽高、位置总结

    原生JS 一.文档.窗口的宽高和位置 // 获取屏幕的宽高 window.screen.height | window.screen.width // 屏幕可用工作区宽高 window.screen. ...

  5. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  6. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  7. 从H264码流中获取视频宽高 (SPS帧) 升级篇

    之前写过 <从H264码流中获取视频宽高 (SPS帧)> . 但发现很多局限性,而且有时解出来是错误的. 所以重新去研究了. 用了 官方提供的代码库来解析. 花了点时间,从代码库里单独把解 ...

  8. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  9. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

随机推荐

  1. 安装webmin

    wget http://nchc.dl.sourceforge.net/project/webadmin/webmin/1.740/webmin-1.740.tar.gz 解压缩文件,命令是:tar ...

  2. 查询语句中select from where group by having order by的执行顺序

    查询语句中select from where group by having order by的执行顺序   1.查询中用到的关键词主要包含六个,并且他们的顺序依次为  select--from--w ...

  3. Java 父类和子类

    package chapter11; public class GeometricObject1 { private String color="white"; private b ...

  4. 网络延迟查看器 Network latency view 1.4

    这是个用于查看网络延迟/ip/主机/地区的工具,内外网通吃,外网可通过这里下载csv以显示国家(地区) 可以自己决定winpcap或者原始套接字进行捕捉 如果只扫描内网推荐angryip 这是款发布在 ...

  5. SQL根据现有表新建一张表

    SQL根据现有表新建表,新建的这张表结构要跟现有表结构相同,但不要现有表里面的数据! 执行DML语句依据数据库类型而定: SQLITE -----复制表结构及数据到新表 CREATE TABLE TA ...

  6. 前端攻城狮学习笔记九：让你彻底弄清offset

    很多初学者对于JavaScript中的offset.scroll.client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确. 图一 不知道 ...

  7. HDU 1003 Max Sum --- 经典DP

    HDU 1003    相关链接   HDU 1231题解 题目大意:给定序列个数n及n个数,求该序列的最大连续子序列的和,要求输出最大连续子序列的和以及子序列的首位位置 解题思路:经典DP,可以定义 ...

  8. Android 中解析 JSON

    有什么不懂的可以去官网去看看:www.json.org 在google android中也有关于解析JSON的类库:JsonReader,但是只能在3.0以后的版本中才可以用,在这里我们用google ...

  9. 网站后台的lnmp启动与重启

    网站建立时间很长了,经常挂掉,又没有其他技术人员带.只好自己摸索着修复. 到今天网站已经挂掉了一个礼拜.请求各路大神无果后决定自己修复. 首先出现的是502,网关错误. 1.上阿里云服务用户中心重新启 ...

  10. 解决dede搜索页面只能显示10条信息解决方案

    解决dede搜索页面只能显示10条信息解决方案,感觉显示的信息太少,这时就要想办法去解决一下.看看有什么好办法来解决一下这个问题. dede搜索页模板中,默认只能显示10条记录. 打开dede搜索页模 ...