获取元素在浏览器中的绝对位置(从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:鼠标在页面上可视区域的位 ...
随机推荐
- Spark调优
因为Spark是内存当中的计算框架,集群中的任何资源都会让它处于瓶颈,CPU.内存.网络带宽.通常,内存足够的情况之下,网络带宽是瓶颈,这时我们就需要进行一些调优,比如用一种序列化的方式来存储RDD来 ...
- Device Channels in SharePoint 2013
[FROM:http://blog.mastykarz.nl/device-channels-sharepoint-2013/] One of the new features of SharePoi ...
- C#中读写JSON风格的配置信息
程序里经常要保存一些设置参数,可以用INI,CONFIG,注册表,XML等等,在stackoverflow中找到这样一篇帖子. http://stackoverflow.com/questions/4 ...
- Core Data的简单用法
#import "ViewController.h" // 第一步:引入头文件AppDelegate #import "AppDelegate.h" #impo ...
- javascript 的字符串原生方法
join([分隔符])数组元素组合为字符串 toString()以字符串表示数组 reverse()数组反转--改变原数组本身 valueOf()返回数组值 <html> <head ...
- 论近年来IT媒体的怪现象
之前在Svbtle上看过一篇文章干掉这帮搞IT新闻的!,作者因为CNET曲解原意,称Instagram要单方面售卖用户自己照片的乌龙事件,致使内心遭受严重刺激,怒吼出「科技媒体记者都应该被枪毙」的言论 ...
- CentOS 6.4安装配置LNMP服务器(Nginx+PHP+MySQL)
准备篇 1.配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables-A INPUT -m state --state NEW -m tcp -p tcp --dp ...
- 深入PHP内核之面向对象总结
很久以前看过的,今天总结一下 一.PHP中创建一个类 在PHP中创建一个简单的类是这样的: <?php $obj = new test($url) ?> 二.zend_class_entr ...
- 【nginx】关于fastcgi_cache
一.简介 Nginx版本从0.7.48开始,支持了类似Squid的缓存功能.这个缓存是把URL及相关组合当做Key,用Md5算法对Key进行哈希,得到硬盘上对应的哈希目录路径,从而将缓存内容保存在该目 ...
- 基于WF4.0的公文管理系统
系统功能说明 公文管理 通过定义公文的基本信息,并将它按照工作流的定义流转实现公文的管理.包含以下功能: )公文创建:用户能够将格式化文本作为公文上传到系统中,并选择工作流启动流程. )公文审批:具有 ...