获取元素在浏览器中的绝对位置(从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:鼠标在页面上可视区域的位 ...
随机推荐
- 自己写的表格插件autotable
自己写的表格插件autotable 作者:田想兵,个人网址:http://www.lovewebgames.com 这个表格插件所完成的功能是:ajax请求数据,然后动态绑定到指定表格下,格式化,分页 ...
- 使用WCF对外提供接口
本篇将通过WCF以webservices的方式对外提供接口.同时使用NUnit对webservices中的方法进行单元测试. 开发契约 contract Contract项目为类库项目,该项目下会包含 ...
- 再议使用Python批量裁切栅格
曾经写过<使用Python脚本批量裁切栅格>,但今天又遇到这个情况则发现了问题.我们遇到的实际问题往往是有一个需要裁剪的影像(大块的),另外有一个矢量面,现在需要按矢量面每一个要素进行裁剪 ...
- R语言学习笔记:因子
R语言中的因子就是factor,用来表示分类变量(categorical variables),这类变量不能用来计算而只能用来分类或者计数. 可以排序的因子称为有序因子(ordered factor) ...
- 【读书笔记】iOS-Xcode知识-多线程
一,Xcode使用的调试器是GDB.GDB是GNU项目的一部分,它可以在很多不同的平台上使用.如果你愿意,可以通过命令行来运行它.GDB有着完善的文档系统,尽管它的文档有些难于理解并且网络上流传着好几 ...
- 【转】IOS设备旋转的内部处理流程以及一些【优化建议】
加速计是整个IOS屏幕旋转的基础,依赖加速计,设备才可以判断出当前的设备方向,IOS系统共定义了以下七种设备方向: typedef NS_ENUM(NSInteger, UIDeviceOrienta ...
- Swift开发第三篇——Playground
本篇分为两部分: 一.Playground的延时运行 二.Playground的可视化 一.Playground的延时运行 Playground 就是提供一个可以即时编译的类似 REPL 的环境,他为 ...
- Office 2013 激活工具
早上装机,顺便装了下Office 2013,界面还是不错的.网上找了下相关的激活工具. 发现还是独木成林做的最好呀,直接把别人的链接给拿过来好了,下载地址 http://pan.baidu.com/s ...
- 21分钟 MySQL 入门教程
目录 一.MySQL的相关概念介绍 二.Windows下MySQL的配置 配置步骤 MySQL服务的启动.停止与卸载 三.MySQL脚本的基本组成 四.MySQL中的数据类型 五.使用MySQL数据库 ...
- 【SVN】Unable to connect to a repository at URL 'svn://localhost/Test'
早上配置SVN,但是这次不是那么顺利... 环境: Windows 7 SVN服务器端:CollabNetSubversion-server-1.8.13-1 SVN客户端:TortoiseSVN_V ...