如何获得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. ...
随机推荐
- 【51nod】1602 矩阵方程的解
[51nod]1602 矩阵方程的解 这个行向量显然就是莫比乌斯函数啦,好蠢的隐藏方法= = 然后我们尝试二分,二分的话要求一个这个东西 \(H(n) = \sum_{i = 1}^{n} \mu(i ...
- Python 解LeetCode:744. Find Smallest Letter Greater Than Target
思路:二分法,时间复杂度o(logn) class Solution(object): def nextGreatestLetter(self, letters, target): "&qu ...
- java poi3.10.1基本excel使用
效果: 代码: //时间 String checkTime = "yyyy/MM/dd"; //人员查询 Set preParticipantNames = new HashSet ...
- 探索grafana
因为zabbix的监控图形不够美观,功能也不够强大, 那么就用到了grafana 填写zabbix插件配置: 如下需要根据主机群组和主机名来完成图形: grafana报警如下: 解决如下: 更改标准设 ...
- Yii2.0 RESTful API 之速率限制
Yii2.0 RESTFul API 之速率限制 什么是速率限制? 权威指南翻译过来为限流,为防止滥用,你应该考虑对您的 API 限流. 例如,您可以限制每个用户 10 分钟内最多调用 API 100 ...
- 少儿编程 | 02.Scratch编程环境
上次课程介绍了Scratch的基本概念和一些特点,最后还给出了一些有趣的例子.本次课程介绍Scratch的两种编程环境以及在Scratch官网注册个人账号的步骤. Scratch 3.0的两种编程环境 ...
- 剑指Offer(4)——替换空格
题目: 请实现一个函数,把字符串中的每个空格替换成"%20".例如输入“We are happy.”,则输出“We%20are%20happy.”. 思路: 如果按照顺序从前往后依 ...
- SpinWait
其实SpinWait的code 非常简单,以前看过很多遍,但是从来都没有整理过,整理也是再次学习吧. 我们先看看SpinWait的一些评论或者注意点吧:如果等待某个条件满足需要的时间很短,而且不希望发 ...
- 2、Java基础:概念
1.面向对象和面向过程的区别 面向过程 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开发.Linux/Unix等一般采用面向过程开发,性能是最重要的因素 ...
- vue 实现的评分小星星组件,包括半星
github源码地址:https://github.com/13476075014/node-vue/blob/master/mynodeproject/13.sell/sell/src/compon ...