当前位置：文江博客文章教程详情

JS 中的各种宽高以及位置总结

发布于 2024-12-05 13:00:52 字数 11123 浏览 9 评论 0

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

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

第一部分：DOM 对象

1.1 只读属性

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

1）clientWidth 和 clientHeight

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

css:

<style>
    .one{
      width: 200px;
      height: 200px;
      background: red;
      border: 1px solid #000000;
      overflow: auto;
    }
  </style>

HTML

<body><div class="one">
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br>
  javascript 高级应用<br></div></body>

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

结果：

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

2）offsetWidth 和 offsetHeight

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

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

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

最终结果：

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

3）clientTop 和 clientLeft

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

css

 <style>
    body{
      border: 2px solid #000000;
    }
    .one{
      border: 1px solid red;
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>

html

<body><div class="one"></div></body>

<script>
  var oDiv=document.getElementsByClassName('one')[0];
  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

 <style>
    .two{
      position: relative;
      width: 200px;
      height: 200px;
      border: 1px solid green;
    }
    .one {
      width: 100px;
      height: 100px;
      background: red;
      margin: 20px;
      border: 1px solid #000000;
      position: absolute;
      top:20px;
    }

  </style>

HTML

<body><div class="two"><div class="one"></div></div></body>

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

最终结果：

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

5）scrollHeight 和 scrollWidth

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

css

 <style>
    .one{
      width: 100px;
      height: 100px;
      overflow: auto;
    }
  </style>

HTML

<body><div class="one">
  我是内容<br>
  我是内容<br>
  我是内容<br>
  我是内容<br>
  我是内容<br>
  我是内容<br>
  我是内容<br>
  我是内容<br>
  我是内容<br>
  我是内容<br>
  我是内容<br>
  我是内容<br>
  我是内容<br></div></body>

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

最终结果

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

1.2 可读可写属性

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

1）scrollTop 和 scrollLeft

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

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

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

最终结果：

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

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

<script>
  var oDiv=document.querySelector('.one');
  oDiv.scrollTop=20;
  oDiv.onscroll=function(){
    console.log(this.scrollTop+":"+this.scrollLeft);
  }
</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），该属性以浏览器左上角坐标为原点，计算鼠标点击位置距离其左上角的位置，

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

<script>
  var oDiv=document.querySelector('.one');
  oDiv.onclick=function(ev){
    var evt=ev||event;
    console.log(evt.clientX+":"+evt.clientY);  
  }
</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，因为页面还存在被卷起来的部分的宽度和高度，如下所示：