获取当前元素节点的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的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...
随机推荐
- Shapely介绍及用户手册
本文主要是基于shapely官方文档翻译而成 shapely主要是在笛卡尔平面对几何对象进行操作和分析. 性能 Shapely中所有的操作都是使用GEOS库.GEOS是用C++写的,也被用在许多应用程 ...
- lightoj 1063 求割点
题目链接:http://lightoj.com/volume_showproblem.php?problem=1063 #include<cstdio> #include<cstri ...
- Piotr's Ants UVa 10881
#include <cstdio> #include <cmath> #include <algorithm> #include <iostream> ...
- Mysql操作命令出现错误时消除/mysql数据导入txt
MySQL怎样取消错误命令 http://jingyan.baidu.com/album/546ae1851e9fd61149f28cef.html?picindex=6 mysql导入数据load ...
- Sea.js提供简单、极致的模块化开发体验
为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...
- [CSS3] CSS :target Selector
The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS. ...
- OSChina 其中很重要的一类——RequestContext
RequestContext 这个类在 OSChina 中是很重要的一个类.该类由全局 Filter 进行初始化.并传递给包含 Action 和 页面中直接使用.使用时通过 RequestContex ...
- Android的Touch系统简介(一)
一.Android touch事件的相关概念 用户的Touch事件被包装成MotionEvent 用户当前的touch事件主要类型有: ACTION_DOWN: 表示用户开始触摸. ACTION_MO ...
- php导出excel不断刷新缓冲区的思路(转)
require('./db.class.php');$DB = new db();$DB->connect();//数据库链接 header("Content-Type: text/c ...
- rsyslog安装
http://www.rsyslog.com/downloads/download-other/ http://www.rsyslog.com/download/stable-download/pag ...