获取元素在浏览器中的绝对位置(从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:鼠标在页面上可视区域的位 ...
随机推荐
- 配置windows失败,还原更新,请勿关机
同事叫我帮忙弄一下电脑,开机,出现"配置Windows Update失败,还原更改,请勿关闭计算机",我从来不更新Windows Update,更新都为成功,第一次遇到失败了,不知 ...
- 【读书笔记】iOS-写代码注意事项
一,我是尽早和经常编译的强烈支持者.通常,在写完每个方法或有点难度的代码后,都要尝试进行构建.这是一个好习惯,因为如果在上次成功编译以来添加的代码量很小,那么可以非常容易地缩小编译错误范围.这个方法还 ...
- git报错 error: cannot stat ‘file’: Permission denied
切换分支时报错: error: cannot stat ‘file’: Permission denied 解决方法:退出编辑器.浏览器.资源管理器等,然后再切换就可以了.
- Android开发者的Git&GitHub(二)
将代码托管到GitHub上 点击右上角New repository按钮来创建一个版本库 命名后选择添加一个Android项目类型的.gitignore文件,并选择开源协议(例如:Apache v2 ...
- Qt安装后配置环境变量(Mac)
打开终端需要打开配置文件(注意这里不是bash_profile而是 .bash_profile,我开始少了".") 如果bash_profile文件不存在,就会自动创建,然后需要输 ...
- Java基础--常用正则匹配符号(必背,必须背,死都要背)
1.字母:匹配单个字母 (1)A:表示匹配字母A: (2)\\:匹配转义字符“\”: (3)\t:匹配转义字符“\t”: (4)\n:匹配转义字符“\n”: 2.一组字符:任意匹配里面的一个单个字符: ...
- 深入剖析jsonp跨域原理
在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理.搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求: 2)jsonp跨域的 ...
- iOS -数据库网络之xml解析
XML文件有2种解析方式 1.基于文档(document) 2.基于事件(sax) 1.IOS中XML文件获取 首先要将XML导入工程中 在ViewController的按钮事件中,代码如下: ...
- python类方法和静态方法
C++的静态方法是用static关键字,python j是没用static的. python中实现静态方法和类方法都是依赖于python的修饰器来实现的. class MyClass: def me ...
- linux搭建mysql 5.6.28
1.下载rmp文件 http://dev.mysql.com/downloads/mysql/ 2.安装 rpm -ivh MySQL-server--.linux_glibc2..x86_64.rp ...