所有现代浏览器均支持以下3个属性:offsetParent,offsetLeft,offsetTop
不同点在于有的浏览器的offsetParent是直接指向根节点的,有的不是
获取相对于父元素的位置
获取相对于CSS容器的位置
获取隐藏元素的高度
不同点在于有的浏览器的offsetParent是直接指向根节点的,有的不是
function pageX(elem){ //查看是否位于根元素 return elem.offsetParent?elem.offsetLeft + pageX(elem.offsetParent):elem.offsetLeft; } function pageY(elem){ return elem.offsetParent?elem.offsetTop + pageY(elem.offsetParent):elem.offsetTop; }
获取相对于父元素的位置
function parentX(elem){ return elem.parentNode == elem.offsetParent?elem.offsetLeft:pageX(elem)-pageX(elem.parentNode); } function parentY(elem){ return elem.parentNode == elem.offsetParent?elem.offsetTop:pageY(elem)-pageY(elem.parentNode); }
获取相对于CSS容器的位置
function cssX(elem){ return parseInt(getStyle(elem,"left")); } function cssY(elem){ return parseInt(getStyle(elem,"top")); }
获取隐藏元素的高度
//获取隐藏元素的高度和宽度 function fullHeight(elem) { if(getStyle(elem,"display") != "none") { return elem.offsetHeight || getHeight(elem); } var old = resetCss(elem, { display:"", visibility:"hidden", position:"absolute" }); var h = elem.offsetHeight || getHeight(elem); restoreCss(elem,old); return h; } function resetCss(elem,prop) { var old = {}; for(var i in prop) { old[i] = elem.style[i]; elem.style[i] = prop[i]; } return old; } function restoreCss(elem,old) { for(var i in prop) { elem.style[i] = old[i]; } }
发表评论
-
Android音频视频文件
2012-12-13 10:29 02010-10-16 17:28:20| 分类: Andro ... -
mysql命令
2012-11-13 17:49 0[url] http://imdiandian.me/blog ... -
关闭端口占用
2012-11-13 10:22 0要想知道某个端口被哪个应用程序占用了,有两种方法: 1.Ne ... -
eclipse快捷键
2012-10-24 10:31 0Eclipse中10个最有用的快 ... -
ext提示
2012-10-18 17:54 0这两天在整理extjs4.1的 ... -
ext4的form字段扩展
2012-10-15 11:45 0Ext.apply(Ext.form.field.VTyp ... -
springMVC从map中读取数据显示在jsp上
2012-09-27 11:19 0六、Model、Map、ModelMap Spring We ... -
转:带图片的单选按钮
2012-09-21 10:59 0一个很好值得学习的方法,平常我们做单选按钮时用的比较多的是单选 ... -
(转)把 label 放在 input 中
2012-09-21 10:58 0http://gugod.org/2009/3/6/_labe ... -
jQuery的基本设计思想和主要用法
2012-08-27 18:17 0从前几天开始到一月底之前,一直都会很忙,每天晚上都是一点之后睡 ... -
draggable.js源码分析
2012-08-27 11:31 0/** * draggable - jQuery Ea ... -
手机app界面平板ui
2012-08-13 15:21 0分类:手机app界面平板ui界面游戏ui界面后台登录界面图标设 ... -
spmenu
2012-08-10 17:32 0body,div,ul,dl,dd,li,p,h1,h2, ... -
实际中遇到的IE6bug汇总
2012-08-08 12:07 0在IE6中select若无初始值,显示不正常,将变窄 &l ... -
json2xml
2012-08-03 14:46 0//获取obj转化的字符串 function json2 ... -
浮动层失去焦点隐藏
2012-08-01 17:29 0var div; //层内的link点击事件,注意让事件 ... -
js与xml
2012-08-01 14:39 0<script> function crea ... -
处理图片
2012-07-31 17:21 0jquery.imgareaselect 处理 ... -
字符串操作
2012-07-31 16:02 0一、字符串的创建 创建一个字符串有几种方法。最简单的是用引号 ... -
js字符串大小写转换的几种方法
2012-07-31 16:00 0js字符串大小写转换的 ...
相关推荐
在 JavaScript 中,我们可以使用多种方法来获取元素的坐标,例如使用 getBoundingClientRect() 方法可以获取元素相对于视窗的坐标,而使用 getComputedStyle() 方法可以获取元素的样式信息,包括其坐标信息。...
"获取元素绝对位置 position"这个话题主要关注JavaScript中如何准确地定位DOM元素在页面中的坐标。这里,我们将深入探讨相关知识,并参考提供的博客链接以及相关的HTML文件。 首先,元素的绝对位置是指元素左上角相...
了解了获取元素坐标的方法后,我们来看看这些坐标在实际中的应用。网页元素的坐标信息在以下场景尤其重要: 1. **模拟点击**:在自动化测试或模拟用户行为时,可能需要根据元素坐标进行精确的点击操作。 2. **可视...
在WPF中,我们可以获取到子控件相对于其父控件的位置坐标。 #### 四、代码解析与实现方法 ##### 1. XAML定义网格布局 在XAML中定义了一个`Grid`作为父控件,并设置了背景图像。此外,还定义了多个`Button`控件...
函数返回一个对象,其中包含了六个属性,分别是:元素自身的宽度(`width`),元素自身的高度(`height`),元素相对于页面(或父元素)左边界的坐标(`x`或`left`),元素相对于页面(或父元素)上边界的坐标(`y`...
获取鼠标在当前屏幕坐标系中的位置信息 将鼠标移动到要获取位置的点,然后按F10,就会弹出当前的坐标值
本文将详细介绍如何使用 jQuery 来获取元素相对于窗口以及滚动条的位置。 #### 一、`offset()` 方法 `offset()` 方法用于获取元素相对于文档的当前位置(不包括边界)。它返回一个对象,包含两个属性:`top` 和 `...
为了实现这一点,JavaScript提供了多种方法来获取元素相对于文档顶部的位置,具体来讲就是获取元素的横向和纵向坐标。文章总结了两种常用方法,分别是通过offsetParent属性和getBoundingClientRect()方法。 首先,...
在CAD中,坐标可以通过绝对坐标(相对于图纸原点)或相对坐标(相对于当前点)来指定。 要获取CAD坐标,你需要打开相应的CAD文件,如DWG或DXF格式。然后,可以使用以下几种方法: 1. **选择对象并查看属性**:在...
此外,如果你正在使用WPF(Windows Presentation Foundation)框架,还可以利用`MouseDevice`类的静态方法`GetPosition`获取鼠标位置,但请注意,这个方法返回的是相对于指定UI元素的坐标,而不是屏幕坐标。要获取...
虽然 `getBoundingClientRect()` 是获取元素坐标的首选方法,但在某些情况下可能需要使用 `offsetTop` 和 `offsetLeft` 来获取元素相对于其最近的已定位祖先元素的位置。 ```javascript function getOffset...
在Vue.js开发中,有时我们需要获取元素的宽度、高度、相对于屏幕或父元素的位置等信息。这通常是通过JavaScript原生的DOM操作实现的,而Vue提供了`$refs`机制来方便地引用Vue实例中的DOM元素。本文将详细介绍如何在...
`GetPosition`方法用于获取鼠标相对于指定元素的位置。 总结来说,无论在Windows Forms还是WPF中,获取鼠标坐标都是通过处理鼠标事件并调用相应的API来完成的。开发者可以根据实际需求选择合适的框架和事件来实现这...
对于HTML控件的坐标,我们可以使用`offsetTop`和`offsetLeft`来获取一个元素相对于其最近的定位父元素(或`offsetParent`属性指定的父元素)的顶部和左侧距离。这些属性只读,不接受赋值。同时,`offsetWidth`和`...
- API调用:许多库和框架提供API来获取元素坐标,例如在Web开发中,JavaScript的getBoundingClientRect()方法可以获取HTML元素相对于视口的位置。 - 图像处理:通过像素坐标来定位图像中的特定区域,如OpenCV库...
offset()方法用于获取或设置元素相对于文档的位置(即视口坐标)。此方法仅对当前文档中可见的元素有效。使用此方法可以获取一个包含top和left属性的对象,这两个属性表示元素的坐标位置,单位为像素。例如,使用...
为了显示鼠标的位置坐标,我们需要获取页面中的输入框元素,并将其`value`属性设置为当前的坐标值。 ```javascript function mouseMove(ev) { Ev = ev || window.event; var mousePos = mouseCoords(ev); ...
在给定的示例中,开发者想要获取元素相对于文档顶部的位置,以便在滚动时将其固定在头部。这时,单纯使用`getBoundingClientRect().top`可能无法满足需求,因为它只提供元素距离视口顶部的距离。因此,开发者使用了`...
在IT领域,特别是前端开发中,获取鼠标坐标是一项基本但重要的功能,它广泛应用于各种交互设计、游戏开发、数据采集等场景。通过JQuery或原生JavaScript,开发者可以轻松实现这一功能,为用户提供更加丰富和动态的...
在网页开发中,有时我们需要知道一个元素在其父级容器中的绝对位置,即该元素相对于页面左上角的坐标(X轴和Y轴的位置)。这对于实现某些动态效果或者交互功能非常重要。JavaScript 提供了多种方法来获取元素的位置...