获取元素在浏览器中的绝对位置(从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:鼠标在页面上可视区域的位 ...
随机推荐
- Hexo建博小结
本来只写在自己的github pages中的,想一想万一有人看呢,虽然同类的文章有不少了,但有些新坑他们没填啊,姑且放出来啦... 拥有自己的博客是一个很酷的事情,但自己建站总是太麻烦了,步骤繁多,管 ...
- 2015年第8本(英文第7本):the city of ember 微光城市
书名:the City of Ember(中文名:微光城市) 作者:Jeanne DuPrau 单词数:6.2万 不重复单词数:未知 首万词不重复单词数:未知 蓝思值:未知 阅读时间:2015年4月2 ...
- Linux平台Makefile文件的编写基础入门(课堂作业)
根据老师的要求,写一个超简单的makefile准备: 准备三个文件:file1.c, file2.c, file2.h file1.c: #include "file ...
- AsyncTask.cancel()的结束问题
实际项目中有这么一个问题,用户进入详情界面,那么我们就要网络加载数据并展现在UI上,这个加载用线程或者异步. 这里就拿项目中统一用异步任务来获取网络数据把. 用户可能会有这么一个操作,它在一个商品(说 ...
- Android中TextView中的文字设置为不同颜色
questionDesTextView=(TextView)findViewById(R.id.question_des); SpannableStringBuilder builder = new ...
- 使用 SharedPreferences 实现数据的存储和读取
在开发的过程中我们必须遇到的就是如何对用户的数据进行有效的存储以及读取.我们举个例子,现在我们使用app,当我们登陆一个账号的时候选择记住密码软件就会记住我们的账号以及密码,我们退出当前账号,就可以直 ...
- 找不到或无法加载主类 org.codehaus.plexus.classworlds.launcher.Launcher
配置PATH的时候,把$PATH写在后面,比如下面这样 export PATH=$MAVEN_HOME/bin:$PATH
- Gleeo Time Tracker简明使用教程
转载一篇很不错的文章,这款软件还是非常实用的 1 简介 Gleeo Time Tracker是安卓平台下一款相当酷的项目时间记录和管理的软件.说他酷,是因为界面纯黑.而除了这点酷之外,功能也很简单实用 ...
- UVa 106 - Fermat vs Pythagoras(数论题目)
题目来源:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=3&pa ...
- sublime text2 汉化
1.下载Sublime-Text-2中文包.zip 链接:http://pan.baidu.com/s/1mgYRW9q 密码:8ks6 2.将 Sublime-Text-2中文包.zip 解压,并将 ...