获取元素在浏览器中的绝对位置(从jquery1.8中抠出来)
<style>
html,body{margin:0;padding:0;}
.d1{margin-left:40px;background:red;width:2000px;height:100px;position:relative;}
.d2{margin-left:40px;background:blue;width:1000px;height:80px;}
</style> <div id="d1" class="d1">
<div id="d2" class="d2"></div>
</div>
function getWindow( elem ) {
return mylibs.isWindow( elem ) ?
elem :
elem.nodeType === 9 ?
elem.defaultView || elem.parentWindow :
false;
}; var mylibs = {
isWindow: function( obj ) {
return obj != null && obj == obj.window;
},
//获取元素在浏览器中的绝对位置
offset:function(elem){
var docElem, win, clientTop, clientLeft, scrollTop, scrollLeft,
box = { top: 0, left: 0 },
doc = elem && elem.ownerDocument; if ( !doc ) {
return;
} docElem = doc.documentElement;
//黑莓5 ios3(iphoe) 没有getBoundingClientRect
if ( typeof elem.getBoundingClientRect !== "undefined" ) {
box = elem.getBoundingClientRect();
}
win = getWindow( doc ); clientTop = docElem.clientTop || document.body.clientTop || 0;
clientLeft = docElem.clientLeft || document.body.clientLeft || 0;
scrollTop = win.pageYOffset || docElem.scrollTop;
scrollLeft = win.pageXOffset || docElem.scrollLeft;
return {
top: box.top + scrollTop - clientTop,
left: box.left + scrollLeft - clientLeft
};
}
}; //调用:
document.getElementById('d2').onclick = function(){
alert(mylibs.offset(this).left);
};
获取元素在浏览器中的绝对位置(从jquery1.8中抠出来)的更多相关文章
- JQuery 获取元素到浏览器可视窗口边缘的距离
获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/ ...
- jquery 获取元素在浏览器中的绝对位置
代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...
- 获取DIV与浏览器顶部相聚一定位置之后移动DIV
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { ...
- javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置
来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...
- js判断浏览器种类以及版本号(从jquery1.8中抠出来的)
var myLibs = { // Use of jQuery.browser is frowned upon. // More details: http://api.jquery.com/jQue ...
- jQuery 获取元素当前位置offset()与position()
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- jquery1.6中的.prop()和.attr()异同
jquery jQueryHTML5JavaScript浏览器ITeye 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop( ...
- Jquery学习笔记(5)--jquery1.6中的.prop()和.attr()异同
jquery1.6中的.prop()和.attr()异同 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop()方法和.attr ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
随机推荐
- Javascript面向对象编程(三) --- 非构造函数的继承
一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做&qu ...
- 导入myeclipse项目出现的问题及解决方案
1.myeclipse 方法上加上@Override就报错 在有@Override方法上面会报错如下: The method oncreate(Bundle) of type HelloWorld m ...
- ExtJs中xtype与组件类的对应表
from:http://blog.163.com/jx_dream/blog/static/117056627201223091021410/ 核心提示:我们在使用 ExtJs 创建组件时最容易理解的 ...
- Arcengine实现创建网络数据集札记(二)
四 ArcEngine实现创建网络数据集 ArcEngine创建网络数据集的过程,与ArcMap设置的过程类似,主要通过六个步骤即可以实现. 1 定义网络数据集对象,并设置基本属性,包括网络数据集名称 ...
- OC数组常见操作
// 数组存放的内容必须是NSObject对象,数组中存放的内容是有序的 // 数组打印输出在输出台是用()包括起来的 // NSArray 不可变数组 // 1.创建对象 // 初始化方法 NSAr ...
- Java之fianl修饰符
fianl修饰的变量不可以改变,一旦获得初始值,该final变量的值就不能被重新赋值. 1.final成员变量(必需由程序员显式地指定初始值) 类变量:必须在静态初始化块中或者声明该变量时指定初始值, ...
- 测试管理_出色测试管理者的思考[持续更新ing]
如何合理安排并按质按量按时完成每一个测试任务,做好项目管理? 如何把控到每一个测试任务的质量? 如何快速构建和构建好测试环境? 如何获取或快速制作测试数据? 如何确保每一个测试人员的工作都饱满? 如何 ...
- Node.js(1)-helloworld
1.Node.Js 环境准备 下载地址: node.js http://nodejs.org/download/ vs.net集成开发环境: Node.js Tools for Visual St ...
- Asp.Net远程调试
1.在本地找到VS安装目录下的 Visual Studio Tools 文件夹 并进入Remote Debugger Folder文件夹 2.根据服务器的操作系统是32位还是64位,选择下面的文件夹 ...
- PL/SQL之--包
一.包 包是一组相关过程.函数.常量.变量.游标.异常等PL/SQL程序设计元素的组合.它类似于C++和Java中的类,其中变量相当于类中的成员变量,过程和函数相当于类中的方法.通过使用包,可以使开发 ...