获取当前元素节点的position和宽高(兼容)
function objxy(n){
var o=document.getElementById(n),x=0,y=0,w=o.offsetWidth,h=o.offsetHeight
if(o.getBoundingClientRect)
{
x=o.getBoundingClientRect().left+document.body.scrollLeft
y=o.getBoundingClientRect().top+document.body.scrollTop
}
else
{
while(o!=null && o.tagName.toUpperCase()!="BODY")
{
x+=o.offsetLeft
y+=o.offsetTop
o=o.offsetParent
}
}
return [x,y,w,h]
}
1、getBoundingClientRect: 这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
document.documentElement.clientTop; // 非IE为0,IE为2 在火狐的firebug中输入document.documentElement.clientTop就能看的返回值为0
2、scrollTop:第一个代表页面利用滚动条滚动到下方时,隐藏在滚动条上方的页面的高度
3、兼容解决 obj.offsetTop 指 obj 距离上方或上层控件的位置;利用while循环,来进行累加。offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。parentObj = element.offsetParent
4、总结
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
获取当前元素节点的position和宽高(兼容)的更多相关文章
- 获取iframe子页面节点,响应浏览器宽高
获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...
- js动态获取浏览器或页面等容器的宽高
首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei ...
- 获取子元素节点(children,childNodes)
在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里 ...
- js中获取页面元素节点的几种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 获取元素节点的子节点 & 获取文本节点
1. 获取元素节点的子节点(**只有元素节点才有子节点): ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 ...
- JavaScript的DOM编程--04--获取元素节点的子节点
获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...
- 绝对定位元素left、right、top、bottom值与其margin和宽高的关系
绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中,定位祖先元素的宽度为W,垂直高度为H,则存在以下关系: 元素水平方向 width + le ...
- JavaScript DOM操作之查找元素节点
概要: 编程接口 可通过 JavaScript 对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). ...
- 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考
起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...
随机推荐
- (转载)PHP_Memcache函数详解
(转载)http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/04/19/2021605.html memcache函数所有的方法列表如下: M ...
- DP(斜率优化):HDU 3507 Print Article
Print Article Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)To ...
- C#中object sender,EventHandler e有个毛作用
button1_Click(object sender,EventHandler e) { Button button=(Button)sender; button.Text="text p ...
- select的使用(一)
单表操作 select Name,Major,InDate from T_Employee as 计算结果 select Name as 姓名,Major,InDate from T_Employee ...
- Android Json数据解析
1.通过主Activity的Button按钮进行解析 public class MainActivity extends Activity { private Button button=null; ...
- NOI题库1159 Maze
1159:Maze 总时间限制: 2000ms 内存限制: 65536kB 描述 Acm, a treasure-explorer, is exploring again. This time he ...
- 《University Calculus》-chaper12-多元函数-拉格朗日乘数法
求解条件极值的方法:拉格朗日乘数法 基于对多元函数极值方法的了解,再具体的问题中我们发现这样一个问题,在求解f(x,y,z)的极值的时候,我们需要极值点落在g(x,y,z)上这种对极值点有约束条件,通 ...
- Freemarker数字转时间
使用freemarker模板,展示一个时间字段,数据库保存的是毫秒.在网上找了许多文章,发现都是针对date或者是直接类似"1999-09-09"这样已经成型字符串进行操作的,心中 ...
- HTTP协议和WEB应用
一.应用层协议原理 1.套接字(Socket):主机地址+端口地址.(通常为32位IP地址和16位端口号组成,总长度为48位) 2.进程通过套接字来接收和发送报文.因特网运输层将所提供的服务整合成两种 ...
- media screen 响应式布局(知识点)
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...