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 ...
随机推荐
- scrollHeight, scrollTop, clientHeight
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- malloc动态分配字符串数组“ 一个月内的提醒”
//输出一个月提醒 #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX_R ...
- python基础——文件访问模式
文件访问模式 访问模式 说明 r 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. w 打开一个文件只用于写入.如果该文件已存在则将其覆盖.如果该文件不存在,创建新文件. a 打开一个 ...
- thymeleaf单选回显,多选回显,选回显,下拉默认选中第一个
//默认选中第一个<input type ="radio" name="repaymentType" th:each ="repaymentTy ...
- PHP获取异常信息
try { } catch (\Exception $e) { $extra = [ 'code' => $e->getCode(), 'msg' => $e->getMess ...
- Ado访问sqlserver 端口号非1433时 连接串的写法
Provider=SQLOLEDB.;Persist Security Info=False;Data Source=hostName,Port //注意用 逗号分隔主机名与端口号
- 华为模拟器ensp安装教程
华为模拟器说实话有时候真的是很烦人,总是莫名其妙的出问题,而且网上教程一般也解决不了 因此我认为学会ensp的重装真的很重要,因此只要我们删除干净了,安装最多花不了20分钟的时间 接下来我就来说说怎么 ...
- Dawson City【道森市】
Dawson City Cities usually have a good reason for being where they are, like a nearby port or river. ...
- C语言进阶——struct和union分析10
struct的小秘密: C语言中的struct可以看作变量的集合 struct的问题:空结构体占用多大内存呢? 程序实例1: #include <stdio.h> struct TS { ...
- POJ:3616-Milking Time
Milking Time Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12324 Accepted: 5221 Descrip ...