获取元素在浏览器中的绝对位置(从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>
 1 function getWindow( elem ) {
 2     return mylibs.isWindow( elem ) ?
 3         elem :
 4         elem.nodeType === 9 ?
 5             elem.defaultView || elem.parentWindow :
 6             false;
 7 };
 8
 9 var mylibs = {
10     isWindow: function( obj ) {
11         return obj != null && obj == obj.window;
12     },
13     //获取元素在浏览器中的绝对位置
14     offset:function(elem){
15         var docElem, win, clientTop, clientLeft, scrollTop, scrollLeft,
16             box = { top: 0, left: 0 },
17             doc = elem && elem.ownerDocument;
18
19         docElem = doc.documentElement;
20         //黑莓5 ios3(iphoe) 没有getBoundingClientRect
21         if ( typeof elem.getBoundingClientRect !== "undefined" ) {
22             box = elem.getBoundingClientRect();
23         }
24         win = getWindow( doc );
25
26         clientTop  = docElem.clientTop  || document.body.clientTop  || 0;
27         clientLeft = docElem.clientLeft || document.body.clientLeft || 0;
28         scrollTop  = win.pageYOffset || docElem.scrollTop;
29         scrollLeft = win.pageXOffset || docElem.scrollLeft;
30         return {
31             top: box.top  + scrollTop  - clientTop,
32             left: box.left + scrollLeft - clientLeft
33         };
34     }
35 };
36
37 document.getElementById(‘d2‘).onclick = function(){
38     alert(mylibs.offset(this).left);
39 };
时间: 2024-08-07 16:36:34

获取元素在浏览器中的绝对位置(从jquery1.8中抠出来)的相关文章

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

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

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

获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { var elm = $('.nav'); var startPos = $(elm).offset().top; $.event.add(window, "scroll", function() { var p = $(window).scrollTop(); $(elm).css('pos

js获取页面的可是宽度,占位宽度,获取元素左上角相对页面左上角的位置,页面左上角相对可是区域的位置,元素是否存在于页面可视范围内

1 var css = (function () { 2 var doEle = document.documentElement, 3 doBody = document.body, 4 elementScrollLeft, 5 elementScrollTop, 6 utils, 7 offsetLeft, 8 offsetTop, 9 offsetParent; 10 11 utils = { 12 13 // 获取页面的可视宽度和高度 14 getAvailPage: function

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

来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置. 相关的属性:left,top,right,bottom 如果网页窗口有滚动条,还要加上下面的这一段: var scrollX = document.documentElement.scrollLeft || docume

js如何将字符串中的字符位置倒转

js如何将字符串中的字符位置倒转:在实际需要中,可能需要将字符串中的字符的位置反转,当然可能应用不会这么直接,下面就通过代码示例介绍一下如何实现此效果,希望能够给需要的朋友或多或少带来一定的帮助.代码实例如下: var str="antzone"; var strArray=str.split(""); console.log(strArray.reverse().join("")); 以上代码实现了我们的要求,非常的简单,就是使用split()

鼠标相对于屏幕的位置、鼠标相对于窗口的位置和获取鼠标相对于文档的位置

一.screenX | screenY用于获取鼠标相对屏幕的位置在IE9+和其他主流浏览器,获取鼠标相对屏幕的位置,代码如下:function (ev){   ev.screenX //获取鼠标相对于屏幕左边的距离   ev.screenY //获取鼠标相对于屏幕顶部的距离}在IE浏览器下,获取鼠标相对屏幕的位置,代码如下:function(){   window.event.screenX //获取鼠标相对于屏幕左边的距离   window.event.screenY //获取鼠标相对于屏幕顶

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

转自:http://hxq0506.iteye.com/blog/1046334 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop()方法和.attr()方法,单从字面上很难区分.在汉语中properties和attributes都有表示“属性”的意思.下面根据这篇博文(javascript:mctmp(0);),简要翻译了.prop()和.attr()的用法: 1.从1.5.2升级到1.6.1 通过介绍新方法.prop(

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

jquery1.6中的.prop()和.attr()异同 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop()方法和.attr()方法,单从字面上很难区分.在汉语中properties和attributes都有表示"属性"的意思.下面根据这篇博文(javascript:mctmp(0);),简要翻译了.prop()和.attr()的用法: 1.从1.5.2升级到1.6.1 通过介绍新方法.prop()以及.att

获取元素样式对象 页面滚出 页面可是大小 添加监听事件 获取事件参数浏览器中位置 的兼容

/** * 获取浏览滚动出去的距离 * @returns {{scrollY: (Number|number), scrollX: (Number|number)}} */function scroll(){ return{ scrollY:window.scrollY||document.body.scrollTop||document.documentElement.scrollTop||0, scrollX:window.scrollX||document.body.scrollLeft|