<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中抠出来)的更多相关文章

  1. JQuery 获取元素到浏览器可视窗口边缘的距离

    获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/ ...

  2. jquery 获取元素在浏览器中的绝对位置

    代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...

  3. 获取DIV与浏览器顶部相聚一定位置之后移动DIV

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() {  ...

  4. javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置

    来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...

  5. js判断浏览器种类以及版本号(从jquery1.8中抠出来的)

    var myLibs = { // Use of jQuery.browser is frowned upon. // More details: http://api.jquery.com/jQue ...

  6. jQuery 获取元素当前位置offset()与position()

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  7. jquery1.6中的.prop()和.attr()异同

    jquery jQueryHTML5JavaScript浏览器ITeye  最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop( ...

  8. Jquery学习笔记(5)--jquery1.6中的.prop()和.attr()异同

    jquery1.6中的.prop()和.attr()异同 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop()方法和.attr ...

  9. 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

    1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...

随机推荐

  1. 说反话(c++实现)

    描述:给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入:测试输入包含一个测试用例,在一行内给出总长度不超过80的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母(大小写有 ...

  2. 去掉 Android工程中让人很不爽的“黄色警告”

    一:问题       二:解决方法 (1)选择android工程,右键Android Tools —> Clear Lint Markers 这种方式能够清除android工程里面的所有警告信息 ...

  3. Activity与Fragment的生命周期

    今天看到一张图,详细描述了Activity和Fragment的生命周期,好资源共享咯!

  4. IOS 图片轮播实现原理 (三图)

    IOS 图片轮播实现原理的一种 图片轮播所要实现的是在一个显示区域内通过滑动来展示不同的图片. 当图片较少时我们可以采用在滚动视图上添加很多张图片来实现. 但是如果图片数量较多时,一次性加载过多图片会 ...

  5. C语言--static全局使用示例

    前言:看到很多使用Objective-C开发IOS的大牛,有时候会使用static全局变量,相比之下,我却很少用这个,从而很少对其有着比较有实质意义的理解,甚至更别说运用它了. 今天,经过一番思考和自 ...

  6. FiddlerScript修改特定请求参数下的返回值

    使用场景: api/Live/GetLiveList接口: (1)Type为1,接口返回直播列表 (2)Type为2,接口返回回放列表 现在想修改直播列表的返回值 思路: 利用FiddlerScrip ...

  7. PHP开发第一个扩展

    首先声明:我们要构建的是扩展或者模块名为hello_module.该模块提供一个方法:hello_word. 一.PHP环境的搭建 1)一般使用源码包编译安装,而不是binary包安装.因为使用PHP ...

  8. CBarChart柱形图类

    在用VC做有关图表的时候,感觉不是那么方便,在codeproject找到一个柱形图的实用类,原文地址为:http://www.codeproject.com/KB/miscctrl/CBarChart ...

  9. 【原创】大众点评监控平台cat的性能分析

    由于工作的原因,或者说我们之前内部监控设计和实现有点不满足现有的研发需求,所以调研了一下大众点评开源出来的cat这一套监控系统. 今天我们就来实验一把,cat的客户端埋点在我们的程序流程中上报数据到c ...

  10. jsp中的四种对象作用域

    page:当前页面,也就是只要挑到别的页面就失效了,可以近似理解为java的this对象 request:一次会话,简单的理解就是一次请求范围内有效,例如如果通过forward方式跳转,则forwar ...