JavaScript 中那些关于坐标和间隔的属性与要领

2019年9月1日 116次阅读 来源: 乐亦栗

一 媒介

在前端开辟中总会碰到林林总总须要运用或盘算坐标和间隔的状况，然则这些属性和要领浩瀚，悉数熟练地记下来并非是一件易事，大多只能现查，消耗不少时刻精神，因而便有了整顿纪录的主意，即加深了印象，又轻易随时查阅。

二 window 对象

浏览器内里，window 对象（注重，w为小写）指当前的浏览器窗口。

它也是当前页面的顶层对象，即最高一层的对象，一切其他对象都是它的部属。一个变量假如未声明，那末默许就是顶层对象的属性。

摘自《阮一峰 JavaScript 教程》

位置大小属性

window.screenX , window.screenY

只读属性

返回浏览器窗口左上角相关于当前屏幕左上角的程度间隔和垂直间隔（单元像素）。

window.innerHeight , window.innerWidth

只读属性

返回网页在当前窗口中可见地区的高度和宽度，即「视口」（viewport）的大小（单元像素）。

注重，这两个属性包括转动条的高度和宽度。

window.outerHeight , window.outerWidth

只读属性

返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单元像素）。

window.scrollX , window.scrollY

只读属性

别号： window.pageXOffset , window.pageYOffset

离别返回页面的程度转动间隔和垂直转动间隔，单元都是像素。

注重，这两个属性的返回值不是整数，而是双精度浮点数。假如页面没有转动，它们的值就是0。

摘自《阮一峰 JavaScript 教程》

为了跨浏览器兼容性，请运用 window.pageXOffset 替代 window.scrollX。别的，旧版本的 IE（<9）两个属性都不支撑，必需经由过程其他的非标准属性来处理此题目。

摘自 MDN ：https://developer.mozilla.org…

window 对象的要领

window.scrollTo() , window.scroll() , window.scrollBy()

window.scrollTo 要领 —> 别号： window.scroll 要领

用于将文档转动到指定位置。

它接收两个参数，示意转动后位于窗口左上角的页面坐标。

也能够接收一个设置对象作为参数。

window.scrollTo(options)

设置对象 options 有三个属性。

  • top：转动后页面左上角的垂直坐标，即 y 坐标。
  • left：转动后页面左上角的程度坐标，即 x 坐标。
  • behavior：字符串，示意转动的体式格局，有三个能够值（smooth、instant、auto），默许值为 auto。

window.scrollBy 要领用于将网页转动指定间隔（单元像素）。

它接收两个参数：程度向右转动的像素，垂直向下转动的像素。

注重：细致体味这两者的差异。

三 Element 节点

Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都邑转化成一个Element节点对象（简称元素节点）。

相干属性

Element.clientHeight，Element.clientWidth

离别返回元素的高度和宽度，始终是整数值。

假如该元素是内联元素（display: inline;），则返回值为 0。

从盒模子的概念上来说，返回的数值盘算包括元素的 content 和 padding ，不包括 border 和 margin 。

假如有转动条，返回的数值会减去转动条占有的宽度或高度。（即不包括转动条在内）

// 浏览器视口高度
document.documentElement.clientHeight

// 网页总高度
document.body.clientHeight

Element.clientLeft，Element.clientTop

离别返回元素的左边框宽度和上边框宽度，没有边框则返回 0。

一样不支撑内联元素。

（我没太邃晓这两个属性有啥作用……）

Element.scrollHeight，Element.scrollWidth

返回当前元素的总高度和总宽度，包括溢出容器、当前并不可见的部份。

包括 padding 地区。

包括伪元素的宽度和高度。

不包括转动条的宽度和高度。

来个小 demo 辅佐下明白：

<div class="box"> 666 </div>
.box {
  width: 200px; height: 200px; overflow: hidden;
  border: 1px solid red; padding: 10px; position: relative;
}
.box::after {
  position: absolute; content: '';
  width: 100px; height: 100px; left: 100%;
}
let box = document.querySelector('.box')
console.log(box.scrollWidth) // 320
console.log(box.scrollHeight) // 220

能够看到 box 元素的 scrollHeight 是 220，这个和我们提到的「包括 padding 地区」相符合。

那 box 元素的 scrollWidth 为啥是 320 ？ 是因为伪元素的位置和宽度，虽然伪元素溢出被隐蔽了，然则这个属性返回的数值依旧包括它。

固然不单单议包括它的宽度和高度，它所处的位置也会盘算在内。

比方把伪元素的 css 改一下：

.box::after {
  position: absolute; content: '';
  width: 100px; height: 100px;
  left: 120%; top: 120%;
}

如今你要不要猜一下 box 的 scrollWidth 和 scrollHeight 离别是多少？

Element.scrollLeft，Element.scrollTop

可读写，设置该属性的值，会致使浏览器将当前元素自动转动到响应的位置。

离别返回当前元素的程度转动间隔和垂直转动间隔。

关于那些没有转动条的网页元素，这两个属性老是即是 0。

假如要检察整张网页的程度的和垂直的转动间隔，要从 document.documentElement 元素上读取。

document.documentElement.scrollLeft
document.documentElement.scrollTop

Element.offsetHeight，Element.offsetWidth

离别返回元素的高度和宽度，包括元素自身的高和宽、padding 和 border ，以及转动条的高和宽。

假如元素的 display 为 none，则返回 0。

与 clientHeight 和 clientWidth 比拟，我想这对属性用的更多一点，因为更多的时刻我们须要猎取的是元素的完全宽高。

Element.offsetLeft，Element.offsetTop

返回当前元素左上角相关于 Element.offsetParent 节点的程度和垂直位移。

说到这个我们来相识下 Element.offsetParent：

Element.offsetParent 属性返回最靠近当前元素的、而且 CSS 的 position 属性不即是 static 的上层元素。

假如该元素是不可见的（display属性为none），或许位置是牢固的（position属性为fixed），则offsetParent属性返回null。

假如某个元素的一切上层节点的position属性都是static，则Element.offsetParent属性指向<body>元素。

摘自《阮一峰 JavaScript 教程》

相干要领

Element.getBoundingClientRect()

返回一个对象，供应当前元素的大小、位置等信息。

我常用来它猎取元素的宽高和坐标。

该对象有如部属性：

  • width
  • height
  • x 元素左上角相关于 视口 的横坐标
  • y
  • left
  • right
  • top
  • bottom

因为元素相关于视口（viewport）的位置，会跟着页面转动变化，因而示意位置的四个属性值，都不是牢固稳定的。假如想得到相对位置，能够将 left 属性加上 window.scrollX ， top 属性加上 window.scrollY。

摘自《阮一峰 JavaScript 教程》

四 鼠标事宜

MouseEvent 接口

let event = new MouseEvent('click', {
    // ...
})

经由过程 addEventListener 增加的 click 事宜所发生的事宜对象也是 MouseEvent 实例。

let box = document.querySelector('.box')

box.addEventListener('click', (e) => {
  console.log(e) // 事宜对象
})

这个事宜对象，也就是 MouseEvent 实例，有许多属性，这里来简朴剖析一下。

MouseEvent.clientX 和 MouseEvent.clientY

只读属性

离别返回鼠标位置相关于 浏览器窗口 左上角的程度坐标和垂直坐标。（不受转动间隔的影响）

能够如许明白：

client 原本就是客户端的意义，web 中的客户端就是浏览器，那 clientX 和 clientY 天然就是相关于浏览器的位置了。

这两个属性还离别有一个别号 MouseEvent.x 和 MouseEvent.y 。

MouseEvent.screenX，MouseEvent.screenY

只读属性

离别返回鼠标位置相关于 屏幕（显示器屏幕地区） 左上角的程度坐标和垂直坐标。

screen 是屏幕的意义，所以，你懂的。

MouseEvent.offsetX，MouseEvent.offsetY

只读属性

离别返回鼠标位置相关于 目的节点（即当前元素） 左上角 padding 边沿 的 程度间隔和垂直间隔。

offset 有偏移的意义，所以这里也能够明白为鼠标位置相关于目的元素内部左上角的偏移值，和目的元素自身以及外部的元素都无关。

那 「padding 边沿」是什么意义呢？

我们拿图措辞：

《JavaScript 中那些关于坐标和间隔的属性与要领》

上图中三个元素离别有红蓝绿三种边框来辨别，红蓝边框宽度为 1px ， 绿边框为 30px 。每一个元素都有 padding 值。详细代码以下：

<!-- HTML -->
<body>
  <div class="parent">
    <div class="hello">Hello</div>
  </div>
</body>
/* css */
body {
  border: 1px solid red; margin: 0; padding: 20px;
}
.parent {
  border: 1px solid blue; padding-top: 50px;
}
.hello {
  width: 100px; height: 100px; padding: 100px; border: 30px solid green;
}

我们给 hello 元素增加一个 click 时刻监听函数：

// js
let hello = document.querySelector('.hello')

hello.addEventListener('click', (e) => {
  console.log(e)
  console.log(e.offsetX)
  console.log(e.offsetY)
})

离别点击 hello 元素的绿色边框和空缺地区，会发明前者的值为负数，后者的值为整数，且都是相对空缺地区的左上角最先盘算的。

这就是我们一最先提到的 「鼠标位置相关于 目的节点（即当前元素） 左上角 padding 边沿 的 程度间隔和垂直间隔」 这句话的意义。

MouseEvent.pageX，MouseEvent.pageY

只读属性

离别返回鼠标位置相关于文档左上角的间隔。（包括转动间隔）

MouseEvent.movementX，MouseEvent.movementY

只读属性

返回当前位置与上一个 mousemove 事宜之间的程度间隔和垂直间隔。

很明显这两个属性和 mousemove 事宜一定有着亲昵的关联，所以我们再相识一下 mousemove 事宜：

当鼠标在一个节点内部挪动时触发。当鼠标延续挪动时，该事宜会一连触发。为了防止机能题目，发起对该事宜的监听函数做一些限制，比方限制一段时刻内只能运转一次。

说到这个应该会牵扯到「撙节」，暂不深入了。

这两个属性照样很有效的，我虽然没咋用过，不过现在想来能够用来推断鼠标的挪动方向等。

参考链接：

window 对象 – WangDoc.com

Element 节点 – WangDoc.com

鼠标事宜 – WangDoc.com

（完）

    原文作者：乐亦栗
    原文地址: https://segmentfault.com/a/1190000019300575
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞