<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对象的绝对坐标的更多相关文章

  1. js获取div相对屏幕的坐标位置

    1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...

  2. 如何隐藏DIV对象

    DIV对象在网页里面,相当于一个容器,在其内部,可以显示文字.图片.视频控件等等. 以下的教程,和大家一起来学习,如何隐藏DIV对象. 这必须使用CSS来控制,才能达到隐藏的目的,那么,就得使用CSS ...

  3. UNITY 复制对象后局部坐标和世界坐标的变化问题

    void Start () { var pgo = transform.Find ("Button").gameObject; obtn = Instantiate (pgo); ...

  4. js获取div对象几何信息

    /** * @description 获取对象信息: * bottom: 208 * height: 200 (老版本IE不兼容) * width: 200 (老版本IE不兼容) * left: 8 ...

  5. 多个div嵌套,获取鼠标所点击的div对象

    我选择的是冒泡事件 $(function() { $("#主divID").on("click",function(e) {//主div是必须存在的 //冒泡事 ...

  6. js鼠标及对象坐标控制属性详细解析

    对js鼠标及对象坐标控制属性进行了详细的分析介绍.  offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...

  7. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  8. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  9. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

随机推荐

  1. 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 ...

  2. Word 查找替换高级玩法系列之 -- 替换手机号中间几位数字

    1.打开"查找和替换"对话框.切换到"开始"选项卡,在"编辑"组中选择"替换".或者按下快捷键"Ctrl+H& ...

  3. 使用redis和thread告警并避免重复告警

    spring cloud使用redis 增加监控,微服务的监控体系特别重要,这里增加了告警(使用thread异步告警),同时不能短时间内不能重复告警(使用redis避免重复) 1.增加依赖       ...

  4. Python 【爬虫】

    爬虫的工作原理 首先,爬虫可以模拟浏览器去向服务器发出请求: 其次,等服务器响应后,爬虫程序还可以代替浏览器帮我们解析数据: 接着,爬虫可以根据我们设定的规则批量提取相关数据,而不需要我们去手动提取: ...

  5. 大话OSI七层协议

    大白话OSI七层协议 互联网的本质就是一系列的网络协议,这个协议就叫OSI协议(一系列协议),按照功能不同,分工不同,人为的分层七层.实际上这个七层是不存在的.没有这七层的概念,只是人为的划分而已.区 ...

  6. 网络模式: host-only & NAT & 桥接

    基本上,Host-only相当于虚拟机和宿主机通过交叉线相连:NAT,宿主机相当于虚拟机的路由器:桥接,相当于把宿主机和虚拟机同时接到交换机上,然后交换机接到外网. 连接性上说,可参考下表: 连接 宿 ...

  7. 剑指Offer(4)——替换空格

    题目: 请实现一个函数,把字符串中的每个空格替换成"%20".例如输入“We are happy.”,则输出“We%20are%20happy.”. 思路: 如果按照顺序从前往后依 ...

  8. django 浅谈索引(转)

    https://blog.csdn.net/qq_37049050/article/details/80749381

  9. linux之find的使用

    基本语法 find [查找目录] [选项] [查找规则] [查找完后的操作] 即:find pathname -option -condition [-print -exec -ok …] 选项参数 ...

  10. Java Web 深入分析(9) Session 和 Cookie

    前言: session 和cookie都是为了保持服务器和客户端之间交互状态.如果一天的PV有几亿,而一个cookie占200个字节但是也会占用很多带宽?所以大访问量就引用session,但是几百台服 ...