如何获得div对象的绝对坐标
<script>
function test() {
var $div0 = $('#0');
var $div1 = $('#1');
var $div2 = $('#2');
var h0 = $div0.offset().top + $div0.height();
var h1 = $div1.offset().top + $div1.height();
var h2 = $div2.offset().top + $div2.height();
console.log($div0.offset().top + '+' + $div0.height() + '=' + h0);
console.log($div1.offset().top + '+' + $div1.height() + '=' + h1);
console.log($div2.offset().top + '+' + $div2.height() + '=' + h2);
}
</script>
在 Chrom 或 Firefox 中点击 F12:

注意 jQuery 的 .offset() 只有 .top 和 .left 属性,没有right 和 bottom 属性,需要right的话可以使用本文例子的方法计算。
如何获得div对象的绝对坐标的更多相关文章
- js获取div相对屏幕的坐标位置
1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...
- 如何隐藏DIV对象
DIV对象在网页里面,相当于一个容器,在其内部,可以显示文字.图片.视频控件等等. 以下的教程,和大家一起来学习,如何隐藏DIV对象. 这必须使用CSS来控制,才能达到隐藏的目的,那么,就得使用CSS ...
- UNITY 复制对象后局部坐标和世界坐标的变化问题
void Start () { var pgo = transform.Find ("Button").gameObject; obtn = Instantiate (pgo); ...
- js获取div对象几何信息
/** * @description 获取对象信息: * bottom: 208 * height: 200 (老版本IE不兼容) * width: 200 (老版本IE不兼容) * left: 8 ...
- 多个div嵌套,获取鼠标所点击的div对象
我选择的是冒泡事件 $(function() { $("#主divID").on("click",function(e) {//主div是必须存在的 //冒泡事 ...
- js鼠标及对象坐标控制属性详细解析
对js鼠标及对象坐标控制属性进行了详细的分析介绍. offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...
- 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能
原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...
- js实现可拖动Div
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
随机推荐
- hadoop--Unable to load native-hadoop library for your platform解决方法
笔者实验环境:centos 7.4.1708,hadoop-2.6.0-cdh5.14.2. 执行hadoop命令时出现以下告警,不能加载相关库: WARN util.NativeCodeLoader ...
- Word 查找替换高级玩法系列之 -- 替换手机号中间几位数字
1.打开"查找和替换"对话框.切换到"开始"选项卡,在"编辑"组中选择"替换".或者按下快捷键"Ctrl+H& ...
- 使用redis和thread告警并避免重复告警
spring cloud使用redis 增加监控,微服务的监控体系特别重要,这里增加了告警(使用thread异步告警),同时不能短时间内不能重复告警(使用redis避免重复) 1.增加依赖 ...
- Python 【爬虫】
爬虫的工作原理 首先,爬虫可以模拟浏览器去向服务器发出请求: 其次,等服务器响应后,爬虫程序还可以代替浏览器帮我们解析数据: 接着,爬虫可以根据我们设定的规则批量提取相关数据,而不需要我们去手动提取: ...
- 大话OSI七层协议
大白话OSI七层协议 互联网的本质就是一系列的网络协议,这个协议就叫OSI协议(一系列协议),按照功能不同,分工不同,人为的分层七层.实际上这个七层是不存在的.没有这七层的概念,只是人为的划分而已.区 ...
- 网络模式: host-only & NAT & 桥接
基本上,Host-only相当于虚拟机和宿主机通过交叉线相连:NAT,宿主机相当于虚拟机的路由器:桥接,相当于把宿主机和虚拟机同时接到交换机上,然后交换机接到外网. 连接性上说,可参考下表: 连接 宿 ...
- 剑指Offer(4)——替换空格
题目: 请实现一个函数,把字符串中的每个空格替换成"%20".例如输入“We are happy.”,则输出“We%20are%20happy.”. 思路: 如果按照顺序从前往后依 ...
- django 浅谈索引(转)
https://blog.csdn.net/qq_37049050/article/details/80749381
- linux之find的使用
基本语法 find [查找目录] [选项] [查找规则] [查找完后的操作] 即:find pathname -option -condition [-print -exec -ok …] 选项参数 ...
- Java Web 深入分析(9) Session 和 Cookie
前言: session 和cookie都是为了保持服务器和客户端之间交互状态.如果一天的PV有几亿,而一个cookie占200个字节但是也会占用很多带宽?所以大访问量就引用session,但是几百台服 ...