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 ...
随机推荐
- RabbitMQ(一 初识)
背景 在web开发过程中有遇到这样的情况:有一部分业务处理速度很慢,但它的结果对最终的返回没有影响,即使报错了,也不需要返回错误信息,只需要在另一个地方可以查询这部分业务的信息即可.例如:用户下单并成 ...
- Linux更改ssh端口号,很easy!
因为公司业务需求,可能涉及到更改ssh远程的端口号,用下面方法轻松解决,废话不多说! 1.打开ssh端口配置文件:vim /etc/ssh/sshd_config,找到如下图所示的端口,改为自己想改的 ...
- 在VSCode中使用码云
在VSCode中使用码云 一.SSH公钥 使用SSH公钥可以让你在你的电脑和码云通讯的时候使用安全连接(Git的Remote要使用SSH地址) 链接 https://gitee.com/profile ...
- 服务器操作nginx相关操作命令
服务器操作nginx相关操作命令 登录服务器: ssh root@0.0.0.0 -p 22100 启动nginx: /usr/local/nginx/sbin/nginx 查看nginx是否启动 p ...
- hdu_4944_FSF’s game
FSF has programmed a game. In this game, players need to divide a rectangle into several same square ...
- 交换机基础配置之stp生成树实验
实验的要求是以上面的拓扑图为例,查看当前根桥的所在并把三成交换机switch1指定为根桥 我们可以用show spanning-tree来查看stp的信息 输入后会显示两部分 上面一部分为当前交换机自 ...
- 数据写入Excel
通过xlwt这个库,可以将数据写入Excel中,而且通过xlwt写excel格式可以控制 颜色.模式.编码.背景色 下面基本上是一个练习,熟悉如何操作xlwt库的 下面是代码,所有的内容,和介绍,基本 ...
- 【Effective C++ 读书笔记】导读 Introduction
学习程序语言根本大法是一回事,学习如何以某种语言设计并实现高效程序则是另一回事. 一组明智选择并精心设计的classes.functions.templates可使程序编写容易.直观.高效.并且远离错 ...
- elasticsearch 5.x 系列之七 基于索引别名的零停机升级服务
一,写在前面的话,elasticsearch 建立索引时的Mapping 设置 建议你在设计索引的初期,就把索引的各个字段设计好,因为,elasticsearch 的各个字段,定义好类型后,就无法进行 ...
- Python学习之编程基础
学习Python之前首先我们要了解Python是什么? question 1:Python是什么? answer:Python是一门编程语言.(什么是编程语言?) 语言:语言是不同个体之间沟通的介质. ...