摘要:例如我想知道写文章的这个页面中定时发布的按钮的尺寸和位置获取宽度,高度的另一种方式对于内联元素调用,返回的是边界矩形,因为内联元素可能跨了多行,所以可能是由多个矩形组成的。对于分为两行的内联元素,边界矩形就包含了两行的宽度。
这两天在写瀑布流的实现,使用了一些关于获取文档坐标、元素位置的函数,刚好看到犀牛书上关于这部分的介绍,特写此文章进行总结,方便日后查找使用。
文档坐标和视口坐标元素的位置X,Y坐标是相对于文档的左上角或视口的左上角。向右表示X增加,向下表示Y增加,以像素来度量。
首先需要明确的是,文档坐标不等于视口坐标。“视口”只是实际显示文档内容的浏览器的一部分,不包括浏览器的菜单、工具条、标签页等“外壳部分”。对于框架页中显示的文档,视口是指定义了框架也的
window.pageXOffset,window.pageYOffset
scrollLeft, scrollTop
正常情况,可以通过document.documentElement来获取
怪异模式,必须使用document.body来获取
function getScrollOffset(w){ w = w || window; if(w.pageXOffset != null) return { x: w.pageXOffset, y: w.pageYOffset }; var d = document; //标准模式 if(document.compatMode == "CSS1Compat") return { x: d.documentElement.scrollLeft, y:d.documentElement.scrollTop }; //怪异模式 return { x: d.body.scrollLeft, y: d.body.scrollTop }; }视口尺寸
function getViewportSize(w){ //使用指定窗口,如果不带参数则使用当前窗口 w = w || window; if(w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight }; var d = w.document; //标准模式 if(document.compatMode == "CSS1Compat") return { w: d.documentElement.clientWidth, h: d.cocumentElement.clientHeight }; //怪异模式 return { w: d.body.clientWidth, h: d.body.clientHeight } }查询元素的尺寸和位置
调用该元素的getBoundingClientRect(),返回的是一个有left,right,top,bottom属性的对象。left,top表示左上角的X,Y,right,bottom表示右下角的X,Y坐标。
返回的是在视口坐标中的位置。返回的坐标包括元素的边框和内边距,不包括外边距。
【注意】getBoundingClientRect并不是实时更新,只是调用方法时文档视觉状态的静态快照,在用户滚动或改变浏览器大小时不会更新它们。
//例如我想知道写文章的这个页面中“定时发布”的按钮的尺寸和位置 var box = document.getElementById("setPublishTime").getBoundingClientRect(); //ClientRect {top: 425, right: 1223, bottom: 460, left: 1141, width: 82, height : 35} //获取宽度,高度的另一种方式 var w = box.width || (box.right - box.left); var h = box.height || (box.bottom - box.top);
ps.对于内联元素调用getBoundingClientRect(),返回的是“边界矩形”,因为内联元素可能跨了多行,所以可能是由多个矩形组成的。对于分为两行的内联元素,边界矩形就包含了两行的宽度。如果需要查询内联元素每个独立的矩形,调用getClientRects()来获取一个只读的类对象数组。
获取某个坐标点的元素如果想知道在视口的指定位置上有什么元素,使用document.elementFromPoint(x,y)
【注意】是视口坐标,而不是文档坐标。返回在指定位置的一个元素
典型案例:将鼠标指针的坐标传递给它来判断鼠标在哪个元素上。不过,鼠标事件对象的target属性已经包含了这些信息。故很少使用document.elementFromPoint()
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54360.html
摘要:例如我想知道写文章的这个页面中定时发布的按钮的尺寸和位置获取宽度,高度的另一种方式对于内联元素调用,返回的是边界矩形,因为内联元素可能跨了多行,所以可能是由多个矩形组成的。对于分为两行的内联元素,边界矩形就包含了两行的宽度。 这两天在写瀑布流的实现,使用了一些关于获取文档坐标、元素位置的函数,刚好看到犀牛书上关于这部分的介绍,特写此文章进行总结,方便日后查找使用。 文档坐标和视口坐标 ...
摘要:入门系列之位置及相对位置事件坐标写过代码的一般都知道,在页面操作中,坐标概念是一个很重要的概念,几乎所有的页面交互都牵扯到坐标的概念。,及表示的是事件触发点相对于事件发生所在节点左上角的位置。我们可以通过获取到元素相对于文档的位置信息。 js入门系列之 位置及相对位置事件坐标 写过代码的一般都知道,在页面操作中,坐标概念是一个很重要的概念,几乎所有的页面交互都牵扯到坐标的概念。尤...
摘要:文档和元素的几何滚动当浏览器在窗口中渲染文档时,它将会创建文档一个视觉表现层,在哪里每个元素都有自己的位置和尺寸。通常应用程序将文档看做元素的树。的问题是触发该事件的文档元素的一个引用。 文档和元素的几何滚动 当浏览器在窗口中渲染文档时,它将会创建文档一个视觉表现层,在哪里每个元素都有自己的位置和尺寸。通常web应用程序将文档看做元素的树。 文档坐标和窗口坐标 元素位置以像素来进行度量...
摘要:相对浏览器窗口简单代码即可实现,然而这是还不够,因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标,的,属性分别表示鼠标点击位置相对于文档的左边距,上边距。 在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8...
阅读 1201·2021-11-10 11:35
阅读 2926·2021-09-24 10:35
阅读 2959·2021-09-22 15:38
阅读 2808·2019-08-30 15:43
阅读 1340·2019-08-29 18:39
阅读 2564·2019-08-29 15:22
阅读 2791·2019-08-28 18:17
阅读 613·2019-08-26 13:37