如何获得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的话可以使用本文例子的方法计算。

时间: 2024-08-04 15:49:18

如何获得div对象的绝对坐标的相关文章

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

1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.getBoundingClientRect().top; return {x:x,y:y}; } 参数传js原生对象 getDivPosition($('#div0')[0]).x getDivPosition($('#div0')[0]).y  

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

void Start () { var pgo = transform.Find ("Button").gameObject; obtn = Instantiate (pgo); //obtn = Instantiate (pgo, pgo.transform.Parent);         var pos = obtn.transform.position; //obtn.transform.localPosition = Vector3.zero; Debug.LogFormat

js获取div对象几何信息

/** * @description 获取对象信息: * bottom: 208 * height: 200 (老版本IE不兼容) * width: 200 (老版本IE不兼容) * left: 8 * right: 208 * top: 8 * x: 8 * y: 8 * @returns */ var div = document.getElementById("div"); console.log(div.getBoundingClientRect()); 原文地址:https:

js获取div的坐标

html中最常使用的控件就是div了,那么如何获取div的坐标呢? 如何方法可以实现. Js代码   /*** * 获取div的坐标 * @param divObj * @returns {{width: number, height: number, left: *, top: Window}} */ com.whuang.hsj.divCoordinate=function(divObj){ if(typeof divObj == 'string'){ divObj=com.whuang.h

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

利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一个接收动态添加div的容器 <div> 功能区域 <br /> <input id="1" type="checkbox" value="新闻" name="11" />新闻 <input id="2" type="checkbox"

&#183;DIV 行内关联 box-shadow对象盒子阴影以及图片阴影

盒子阴影样式单词:box-shadow 语法 <style> div{box-shadow:0 0 1px #000 inset;} </style> 其中,第一个和第二个0分别代表边框间距靠左和靠上:1px表示阴影范围:#000表示阴影颜色为黑色:inset 代表框内阴影 ,没有inset 则代表框外阴影. 需要注意的是: box-shadow:0px 0px 1px #000当第1个值为0时,代表左右边框阴影 为1px范围第1个值为正整数 代表 左边框阴影第1个值为负整数 代表

js实现可拖动Div

js实现可拖动Div 随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代

javascript坐标:event.x、event.clientX、event.offsetX、event.screenX 用法

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标. screenY 设置或获取鼠标指针位置相对于用户屏幕

Javascript 简单实现鼠标拖动DIV

http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/article/10578.htm <html> <head><title>拖动效果函数演示 by Longbill.cn</title> <style> body { font-size:12px; color:#333333; border : 0px