js获取页面元素位置函数(跨浏览器)
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
var el = document.getElementById(elementId);
if(el.parentNode === null || el.style.display == 'none') {
return false;
}
var parent = null;
var pos = [];
var box;
if(el.getBoundingClientRect) //IE
{
box = el.getBoundingClientRect();
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
return {x:box.left + scrollLeft, y:box.top + scrollTop};
}else if(document.getBoxObjectFor) // gecko
{
box = document.getBoxObjectFor(el);
var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;
pos = [box.x - borderLeft, box.y - borderTop];
} else // safari & opera
{
pos = [el.offsetLeft, el.offsetTop];
parent = el.offsetParent;
if (parent != el) {
while (parent) {
pos[0] += parent.offsetLeft;
pos[1] += parent.offsetTop;
parent = parent.offsetParent;
}
}
if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) {
pos[0] -= document.body.offsetLeft;
pos[1] -= document.body.offsetTop;
}
}
if (el.parentNode) {
parent = el.parentNode;
} else {
parent = null;
}
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
pos[0] -= parent.scrollLeft;
pos[1] -= parent.scrollTop;
if (parent.parentNode) {
parent = parent.parentNode;
} else {
parent = null;
}
}
return {x:pos[0], y:pos[1]};
}
使用示例
var pos=getElementPos("divId");
alert("距左边距离"+ pos.x +",距上边距离"+pos.y);
js获取页面元素位置函数(跨浏览器)的更多相关文章
- js获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
- JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值
jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...
- js获取页面元素的位置
一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页 ...
- JS获取页面元素并修改
//实现代码如下,非常简单<script> (function(){ var ele = document.getElementsByTagName("ul"); // ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
- JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
- webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2
js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...
随机推荐
- ajax实现无刷新两级联动DropDownList
ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...
- Android 最新学习资料收集
收集这份资料的灵感来源于我的浏览器收藏夹快爆了,后来在github 上也看到了很优秀的开源库的收集资料,非常的好,但是太过于多,也不够新,所以决定自己来做一个.原始的markdowm文件已经放到git ...
- C# CheckBoxList 实现全选/反选功能怎么写?
首先我们用RadioButtonList控件,且必须包含OnSelectedIndexChanged事件和AutoPostBack=‘true’属性, <asp:LinkButton ID=&q ...
- 【杂题总汇】HDU多校赛第十场 Videos
[HDU2018多校赛第十场]Videos 最后一场比赛也结束了…… +HDU传送门+ ◇ 题目 <简要翻译> 有n个人以及m部电影,每个人都有一个快乐值.每场电影都有它的开始.结束时间和 ...
- Hibernate无法提取结果集
原因:表结构错误或 与 映射文件不一致 org.springframework.dao.InvalidDataAccessResourceUsageException: could not extra ...
- 使用select2 宽度自适应
加一个CSS属性:style = "width : 100%"
- MySQL中使用group_concat()函数数据被截取(有默认长度限制),谨慎!
最近在工作中遇到一个问题: 我们系统的一些逻辑处理是用存储过程实现的,但是有一天客服反馈说订单下单失败,查了下单牵扯到的产品基础资源,没有问题. 下单的存储过程中有这样两句代码: ; ; ; 执行存储 ...
- PHP Socket服务器搭建和测试
1.socket服务器搭建思路 1) 目的:理解socket服务器工作机制 2) 思路:创建socket -> 把socket加入连接池 -> 处理接收信息 -> 握手动作 -> ...
- Python的循环正确的操作使用方法详解
要计算1+2+3,我们可以直接写表达式: >>> 1 + 2 + 3 6 要计算1+2+3+...+10,勉强也能写出来. 但是,要计算1+2+3+...+10000,直接写表达式就 ...
- BFS例题:A计划
ContribContrib/a11y/accessibility-menu.js 关于 BFS要点: 1.若为可化为的坐标系图形,可用结构体存储其x值,y值和步数.(一般开now 和 next ,n ...