JavaScript 空间坐标的使用

基础知识

首先参考画布分为视口(窗口)与文档的含义

网页很多都是多屏,所以文档尺寸一般大于视口尺寸

视口尺寸不包括浏览器工具条、菜单、标签、状态栏等

当打开控制台后,视口尺寸相应变小

文档像 position 定位,视口类似 fixed 定位

文档坐标在页面滚动时不发生改变

视口坐标的操作需要考虑滚动条的位置

视口文档

视口坐标需要知道滚动条位置才可以进行计算,有以下几种方式获取滚动位置

方法 说明 注意
window.innerWidth 视口宽度 包括滚动条(不常用)
window.innerHeight 视口高度 包括滚动条(不常用)
document.documentElement.clientWidth 视口宽度  
document.documentElement.clientHeight 视口高度  

注意,均是以像素为单位,且视口尺寸不包括浏览器工具条、菜单、标签、状态栏等

<script>
  document.write(document.documentElement.clientWidth); // 1707
  document.write(document.documentElement.clientHeight) // 803
</script>

几何形状

元素在页面中拥有多个描述几何数值的尺寸,下面截图进行了形象的描述。

方法 说明 备注
element.getBoundingClientRect 返回元素在视口坐标及元素大小,不包括外边距,width/height与offsetWidth/offsetHeight匹配 窗口坐标
element.getClientRects 行级元素每行尺寸位置组成的数组  
element.offsetParent 拥有定位属性的父级,或body/td/th/table 对于隐藏元素/body/html值为null
element.offsetWidth 元素宽度尺寸,包括内边距与边框和滚动条  
element.offsetHeight 元素高度尺寸,包括内边距与边框和滚动条  
element.offsetLeft 相对于祖先元素的X轴坐标  
element.offsetTop 相对于祖先元素的Y轴坐标  
element.clientWidth 元素宽度,不包含边框,只包含内容和内边距,行元素尺寸为0  
element.clientHeight 元素高度,不包含边框,只包含内容和内边距,行元素尺寸为0  
element.clientLeft 内容距离外部的距离,滚动条在左侧时包括滚动条尺寸  
element.clientTop 内容距离顶部的距离,滚动条在顶部时包括滚动条尺寸  
element.scrollWidth 元素宽度,内容+内边距+内容溢出的尺寸  
element.scrollHeight 元素高度,内容+内边距+内容溢出的尺寸  
element.scrollLeft 水平滚动条左侧已经滚动的宽度  
element.scrollTop 垂直滚动条顶部已经滚动的高度  

为什么不要使用getComputedStyle

尺寸设置 auto 时获取结果不可用

由于滚动条的存在,不同浏览器返回结果不同

元素没有设置尺寸获取不到

getBoundingClientRect

使用 getBoundingClientRect 获取元素矩形信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      height: 300px;
      width: 300px;
      padding:10px;
      margin: 10px;
      border:5px solid #ddd;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div></div>
</body>
<script>
  let div = document.querySelector("div");
  let position = div.getBoundingClientRect();
  console.log(position);

</script>
</html>

计算结果的矩形尺寸不包括外边距

bottom: 340
height: 330
left: 18
right: 348
top: 10
width: 330
x: 18
y: 10

getClientRects

多行元素分别返回每行所占的尺寸,下面的行元素将为每行返回矩形尺寸

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      width: 200px;
      overflow: auto;
    }
  </style>
</head>

<span>网页很多都是多屏,所以文档尺寸一般大于视口尺寸,当打开控制台后,视口尺寸相应变小。网页很多都是多屏,所以文档尺寸一般大于视口尺寸,当打开控制台后,视口尺寸相应变小。网页很多都是多屏,所以文档尺寸一般大于视口尺寸,当打开控制台后,视口尺寸相应变小。</span>
<script>
  let span = document.querySelector('span')
  let info = span.getClientRects()
  console.log(info)
</script>

</html>

// 第一行信息
bottom: 29.33333396911621
height: 21.33333396911621
left: 8
right: 1683.5555419921875
top: 8
width: 1675.5555419921875
x: 8
y: 8

// 第二行信息
bottom: 50.66666793823242
height: 21.33333396911621
left: 8
right: 264
top: 29.33333396911621
width: 256
x: 8
y: 29.33333396911621

坐标判断

Js 提供了方法获取指定坐标上的元素,如果指定坐标点在视口外,返回值为 null

坐标都是从左上角计算,这与 CSS 中的 right/bottom 等不同

窗口坐标类似于 position:fixed

文档坐标类似于 position:absolute

方法 说明
element.elementsFromPoint 返回指定坐标点所在的元素集合
element.elementFromPoint 返回指定坐标点最顶级的元素

元素集合

返回指定坐标点上的元素集合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
<script>
  let positionEleList = document.elementsFromPoint(100,100);
  console.log(positionEleList);

  // div
  // body
  // html

</script>
</html>

顶级元素

返回坐标点上的顶级元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
<script>
  let positionEle = document.elementFromPoint(100,100);
  console.log(positionEle);

  // div

</script>
</html>

滚动控制

方法 说明 参数说明
window.pageXOffset 文档相对窗口水平滚动的像素距离  
window.pageYOffset 文档相对窗口垂直滚动的像素距离  
element.scrollLeft() 元素X轴滚动位置  
element.scrollTop() 元素Y轴滚动位置  
element.scrollBy() 按偏移量进行滚动内容 参数为对象,{top:垂直偏移量,left:水平偏移量,behavior:'滚动方式'}
element.scroll() 或 element.scrollTo() 滚动到指定的具体位置 参数为对象,{top:X轴文档位置,left:Y轴文档位置,behavior:'滚动方式'}
element.scrollLeft 获取和设置元素X轴滚动位置 这是属性,设置X轴文档位置
element.scrollTop 获取和设置元素Y轴滚动位置 这是属性,设置Y轴文档位置
element.scrollIntoView(bool) 定位到顶部或底部 参数为true元素定位到顶部,为false定位到窗口底部

使用 scrollBy 滚动文档

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 2000px;
      background: linear-gradient(to bottom, red, green, blue, yellow)
    }
  </style>
</head>

<body>

</body>
<script>
  setInterval(() => {
    document.documentElement.scrollBy({top:30,behavior:"smooth"},100); // 相当于每个3秒往下走30px,参照于上次所停留位置,smooth平滑滚动
  },3000);

</script>

</html>

使用 scroll 滚动到指定位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 2000px;
      background: linear-gradient(to bottom, red, green, blue, yellow)
    }
  </style>
</head>

<body>

</body>
<script>
  setInterval(() => {
    document.documentElement.scroll({top:30,behavior:"smooth"},100);
  },3000); // 按照绝对位置,距离上部30px,只走一次,smooth平滑滚动

</script>

</html>

使用元素 scrollIntoView 方法实现滚动操作,参数可以是布尔值或对象。

<a> 标签锚点效果类似。

参数为 true 时顶部对齐,相当于 {block: "start"}

参数为 false 时底部对齐,相当于 {block: "end"}

定义 {behavior:smooth} 为平滑滚动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    section {
      height: 2000px;
      background: linear-gradient(to bottom, red, green, blue, yellow)
    }

    body button {
      position: fixed;
      bottom: 10%;
      width: 100px;
      height: 30px;
    }

    body button:first-of-type {
      right: 5%;
    }

    body button:last-of-type {
      left: 5%;
    }
  </style>
</head>

<body>
  <header>
    <h1>头部</h1>
  </header>
  <button class="top">TOP</button>
  <button class="bottom">BOTTOM</button>
  <section></section>
  <footer>
    <h1>底部</h1>
  </footer>
</body>
<script>
  document.querySelector("button.top").addEventListener("click", (event) => {
    let h1 = document.querySelector("header h1");
    h1.scrollIntoView({
      behavior: "smooth",
    })
  });

  document.querySelector("button.bottom").addEventListener("click", (event) => {
    let h1 = document.querySelector("footer h1");
    h1.scrollIntoView({
      behavior: "smooth",
    })
  })
</script>

</html>

到此这篇关于JavaScript 空间坐标的文章就介绍到这了,更多相关JavaScript 空间坐标内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-08-19

javascript实时获取鼠标坐标值并显示的方法

本文实例讲述了javascript实时获取鼠标坐标值并显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

js获得鼠标的坐标值的方法

复制代码 代码如下: var x , y; //当需求为获得的坐标值相对于body时,用: function positionBody(event){ event = event||window.event; //获得相对于body定位的横标值: x=event.clientX //获得相对于body定位的纵标值: y=event.clientY } //当需求为获得的坐标值相对于某一对象时,用: function positionObj(event,id){ //获得对象相对于页面的横坐标值:

js与jquery中获取当前鼠标的x、y坐标位置的代码

复制代码 代码如下: <div id="testDiv">放在我上面</div> <script type="text/javascript"> $('#testDiv').mousemove(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.l

js获取窗口相对于屏幕左边和上边的位置坐标

获取窗口相对于屏幕左边和上边的位置: 复制代码 代码如下: var x=window.screenLeft?window.screenLeft: window.screenX ; var y=window.screenTop?window.screenTop: window.screenY; alert(x+" "+y);

JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)

JavaScript获取鼠标移动时的坐标(兼容:IE8.谷歌.Firefox.Opera ),测试通过 直接复制成html文件,即可运行. 为方便大家测试特准备了一份在线演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

JavaScript获取鼠标坐标的函数(兼容IE、FireFox、Chrome)

还好网上什么都有,上网找了一个浏览器兼容性最佳的函数,经测试兼容IE.FireFox.Chrome,并且不会有滚动条误差问题,存档下,以备后用 :) 复制代码 代码如下: function mousePos(e){     var x,y;     var e = e||window.event;     return {         x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,      

javascript获取当前鼠标坐标的方法

本文实例讲述了javascript获取当前鼠标坐标的方法.分享给大家供大家参考.具体实现方法如下: 对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解.具体代码如下: 复制代码 代码如下: <html> <head> <title>javascript获取当前鼠标坐标</title> <meta http-equiv="content-type" content="text/html;chars

js实现获取div坐标的方法

本文实例讲述了js实现获取div坐标的方法.分享给大家供大家参考,具体如下: html中最常使用的控件就是div了,那么如何获取div的坐标呢? 如下方法可以实现: /*** * 获取div的坐标 * @param divObj * @returns {{width: number, height: number, left: *, top: Window}} */ com.whuang.hsj.divCoordinate=function(divObj){ if(typeof divObj =

javascript 事件对象 坐标事件说明

测试浏览器的版本: IETester 6 ,7 IE 8.0 Firefox 3.5.5 Chrome 4.1.249.1064 (45376) Opera 9.64 Safari 4.0 先来看看各个主流浏览器都有哪些坐标属性以及它们的意义 在IE中 event.offsetX event.offsetY 相对于e.srcElement坐标 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. event.clientX event

js中事件对象和事件委托的介绍

Ie9以下浏览器中的事件对象是放在全局中的window.event; 解决兼容性:event = event || window.event 事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变): event.target(点击的目标对象) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

从零开始学习jQuery (五) jquery事件与事件对象

一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言 本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性.  大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借鉴. 另外本人水平有限, 因为我不是UI设计师. 文章可能有错误的地方, 希望大家帮忙指出, 一起学习一起进步. 在技术的世界里我们是没有

微信小程序事件对象中e.target和e.currentTarget的区别详解

在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下来说说这二者的区别. 首先上代码: wxml部分: <view id='tar-father' bindtap='click'> 父组件 <view id='tar-children'>子组件</view> </view> wxss部分: #tar-father{ width: 300rpx; height: 300rpx; backgro

JavaScript 事件对象介绍

JavaScript事件的一个重要的方面是它们拥有一些相对一致的特点,可以给开发提供强大的功能; 最方便和强大的就是事件对象,它们可以帮你处理鼠标事件和键盘敲击方面的情况; 此外还可以修改一般事件的捕获/冒泡流的函数; 一 事件对象 // 事件处理函数的一个标准特性是:以某些方式访问的事件对象包含有关于当前事件的上下文信息; // 事件处理由三部分组成:对象.事件处理函数=函数; document.onclick = function(){ alert('Lee'); } // PS:以上程序解

JavaScript学习笔记之JS事件对象

事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等: event对象只在事件发生的过程中才有效. firefox里的event跟IE里的不同,IE里的是全局变量,随时可用:firefox里的要用参数引导才能用,是运行时的临时变量. 在IE/Opera中是window.event,在Firefox中是event: 而事件的对象,在

理解JavaScript事件对象

在触发DOM上的某个事件时,会产生一个事件对象event. DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中.event对象包含与创建它的特定事件有关的属性和方法.除法的事件类型不一样,可用的属性方法就不一样.不过,所有的事件都会有下表列出的成员. 下面列出了 2 级 DOM 事件标准定义的属性: bubbles: 返回布尔值,指示事件是否是起泡事件类型. cancelable: 返回布尔值,指示事件是否可拥可取消的默认动作. currentTarget: 返回其

JavaScript 事件流、事件处理程序及事件对象总结

JS与HTML之间的交互通过事件实现.事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合.本文将介绍JS事件相关的基础知识. 一.事件流 事件流描述的是从页面中接受事件的顺序. 事件冒泡 事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的结点(文档).以下面HTML页面为例,如果你点击了页面中的按钮,那么"

JavaScript事件学习小结(三)js事件对象

相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

JavaScript事件对象深入详解

本文实例讲述了JavaScript事件对象.分享给大家供大家参考,具体如下: 触发 DOM 上的事件时,会生成一个事件对象 event,它包含着所有与事件有关的信息,诸如导致事件的元素.事件的类型以及其他与特定事件相关的信息.所有的浏览器都支持 event 对象,但支持的方式不同. 1 DOM 中的事件对象 兼容 DOM 的浏览器会将 event 对象传入事件处理程序(DOM0 级与 DOM2 级都支持): var btn = document.getElementById("myBtn&quo