<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. css权重是什么

    css权重是什么? 概述 css Specificity中文一般译为css优先级.css权重.相比"权重","优先级"更好理解,mozilla官方中文文档就翻译 ...

  2. sqlserver 死锁原因及解决方法

    其实所有的死锁最深层的原因就是一个:资源竞争 表现一: 一个用户A 访问表A(锁住了表A),然后又访问表B,另一个用户B 访问表B(锁住了表B),然后企图访问表A,这时用户A由于用户B已经锁住表B,它 ...

  3. .NET破解之百度网盘批量转存工具

    在百度网盘上看到好的资源,总想转存到自己的网盘,加以整理.由于分享的规则原因,手动转存非常麻烦,于是百度批量转存工具.最先搜到的是小兵的百度云转存助手,无需注册,试用版用户一次只能操作10个,而捐助用 ...

  4. R语言学习笔记:向量

    向量是R语言最基本的数据类型. 单个数值(标量)其实没有单独的数据类型,它只不过是只有一个元素的向量. x <- c(1, 2, 4, 9) x <- c(x[1:3], 88, x[4] ...

  5. Sharepoint学习笔记—习题系列--70-573习题解析 -(Q115-Q117)

    Question 115You create a timer job.You need to debug the timer job.To which process should you attac ...

  6. 据说是百度ios面试题

    百度面试题:   一面:知识点 Objective C runtime library: Objective C的对象模型,Block的底层实现结构,消息发送,消息转发,内存管理 CoreData : ...

  7. Android 开发组件

    每一个应用程序都有自己独立的运行沙盒(授予应用程序代码的访问权) Android操作系统是一个多用户的Linux系统,其中的每一个应用程序都是一个独立的用户. 系统会为每一个应用程序分配一个唯一的Li ...

  8. Unity3D事件函数的执行顺序 - 包含渲染等模块的完整版,中英文对照

    原文地址: http://www.cnblogs.com/ysdyaoguai/p/3746828.html In Unity scripting, there are a number of eve ...

  9. iOS之多控制器管理--项目中的常见文件

    项目中的常见文件 内容大纲: 1.LaunchScreen 2.info.plist文件 3.pch文件 1.LaunchScreen xcode5和xcode6区别 1.xcode6没有Framew ...

  10. 导出excel乱码问题

    今天遇到一个问题,在用C#做导出excel的时候,出现excel乱码问题.百度了下. 发现问题如下: 非中文字符编码问题. 解决方法: 把输出的excel格式设置成UTF-8即可. 更改代码: Res ...