<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. DOM应用实例(寻找房祖名)

    在上一篇我讲到了DOM的一些总结,这一次我就用我前几天做的一个游戏demo来讲讲DOM的一些用法吧. 首先简单说说这个游戏,如下图所示(大家忽略样式/(ㄒoㄒ)/~~).当玩家点击开始后,只要选择了正 ...

  2. AutoCAD .NET二次开发(四)

    在CAD中,属性信息一般是以注记的形式存在,但当属性数据内容较多时,显示就成了问题.扩展属性(Xdata)可以解决这一问题,比如南方Cass中就利用了这一点.我们经常用Lisp来读取操作扩展属性. 查 ...

  3. 2015年第13本(英文第9本):Murder on the Orient Express 东方快车谋杀案

    书名:Murder on the Orient Express 东方快车谋杀案 作者:Agatha Christie 单词数:6.1万 不重复单词数:不详 首万词不重复单词数:不详 蓝思值:640 阅 ...

  4. JAVA-使用commos-fileupload实现文件上传与下载

    一文件的上传 实体类 在CODE上查看代码片派生到我的代码片 import java.sql.Timestamp; /** * * @Decription 文件上传实体类 * @author 刘楠 * ...

  5. iOS开发笔记12:iOS7上UITextField限制字数输入导致崩溃问题

    在一些场景中,需要限制用户的输入字数,例如在textField里进行控制(textView也类似,崩溃原因也相同),如图所示 系统会监听文本输入,需要注意的第一点是输入法处于联想输入还未确定提交的时候 ...

  6. Java基础--常用正则匹配符号(必背,必须背,死都要背)

    1.字母:匹配单个字母 (1)A:表示匹配字母A: (2)\\:匹配转义字符“\”: (3)\t:匹配转义字符“\t”: (4)\n:匹配转义字符“\n”: 2.一组字符:任意匹配里面的一个单个字符: ...

  7. [转载] 数据测试常用的Data Profiling方法

    现在对数据质量的要求越来越高,面对一个动辄上亿条数据的报表如何快速对它的数据质量做出分析呢?给大家分享下我们测试时用到的Data Profiling方法. Data Profiling,可以大概翻译“ ...

  8. Effective Java 06 Eliminate obsolete object references

    NOTE Nulling out object references should be the exception rather than the norm. Another common sour ...

  9. Effective Java 07 Avoid finallizers

    NOTE Never do anything time-critical in a finalizer. Never depend on a finalizer to update critical ...

  10. Remote Desktop Connection Manager (RDCMan) 介绍

    Remote Desktop Connection Manager介绍 Remote Desktop Connection Manager (RDCMan) 是微软Windows Live体验团队的主 ...