<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. java. util. concurrent. atomic

    一.原子更新基本类型 AtomicInteger AtomicBoolean AtomicLong 二.原子更新数组 AtomicIntegerArray AtomicLongArray Atomic ...

  2. Http中的同步请求和异步请求

    最近在上springmvc的JSON数据交换的时候,老师下课提了一个课后问题:什么是异步请求?什么是同步请求?我想大部分同学听到这个问题的时候应该和我一样不知所云.现在,给大家分享一篇关于同步请求和异 ...

  3. java 框架-分布式文件管理系统1FastDFS

    https://www.cnblogs.com/chiangchou/p/fastdfs.html

  4. ElasticSearch创建动态索引

    ElasticSearch创建动态索引 需求:某实例需要按照月份来维护,所以之前的“写死”索引的方式当然不行了.通过百度和看SpringDataElasticSearch官方文档,最后解决了这个问题. ...

  5. 如何判断 Session是否存在

    相信很多人都跟我一样,在写网页中有些位置通过其他网页设置了 Session然后跳转到目标页面就需要要用 Session,但是那个位置如果是直接打开的就用不到 Session,那么问题就来了,例如:系统 ...

  6. ElementUI 复杂顶部和左侧导航栏实现

    描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...

  7. 简单SQL注入试探、二

    DVWA——简单SQL注入小记 今天我们来记录简单的盲注过程 简单的SQL injection(blind) Level:low 登陆后选择SQL Injection(Blind) 能看到这样的界面 ...

  8. 【Zookeeper】应用场景概述

    一.数据发布与订阅(配置中心) 二.负载均衡 三.命名服务(Naming Service) 四.分布式通知/协调 五.集群管理与Master选举 六.分布式锁 七.分布式事务 一.数据发布与订阅(配置 ...

  9. flask 中的ORM

    1 响应(response) 1 什么是响应 响应就是由服务器端带给客户端的内容,对应着请求,响应可以是普通的字符串,模板 或重定向 return '普通字符串' return render_temp ...

  10. pymysql 1064, 'You have an error in your SQL syntax; check the manual that corresponds to

    在python 连接mysql时,最近一直出现了 1064, 'You have an error in your SQL syntax; check the manual that correspo ...