html中最常使用的控件就是div了,那么如何获取div的坐标呢?
如何方法可以实现.
/***
* 获取div的坐标
* @param divObj
* @returns {{width: number, height: number, left: *, top: Window}}
*/
com.whuang.hsj.divCoordinate=function(divObj){
if(typeof divObj == 'string'){
divObj=com.whuang.hsj.$$id('divObj');
}
return {'width':divObj.offsetWidth,'height':divObj.offsetHeight,
'x':divObj.offsetLeft,'y':divObj.offsetTop,
'scrollLeft':com.whuang.hsj.getScroll().left,'scrollTop':com.whuang.hsj.getScroll().top};
}
// Cross browser gets the position of scroll
com.whuang.hsj.getScroll=function(){
return {
top:document.documentElement.scrollTop || document.body.scrollTop,
left:document.documentElement.scrollLeft || document.body.scrollLeft
}
}
com.whuang.hsj.divCoordinate()方法介绍
功能:返回div坐标;
参数:div对象或div的id(字符串);
返回值:对象,有六个属性:
width:div自身的宽度;
height:div自身的高度;
x:div左上角的坐标x;
y:div左上角的坐标y;
scrollLeft:水平滚动条的位置
scrollTop:竖直滚动条的位置
测试页面:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="js/common_util.js"></script>
<script type="text/javascript">
function run(){
var loc=com.whuang.hsj.divCoordinate('divObj');
// document.writeln();
com.whuang.hsj.$$id('text22').innerHTML="width:"+loc.width+" , height:"+loc.height+" , scrollTop:"+loc.scrollTop+" , scrollLeft:"+loc.scrollLeft+" , x:"+loc.x+" , y:"+loc.y;
}
</script>
</head>
<body>
<div style="width: 599px;height: 499px;background-color: mediumvioletred;" id="divObj" >
</div>
<br>
<input type="button" value="run" onclick="run();" >
<div id="text22" style="width: 400px;" >
</div>
</body>
</html>
运行结果:
参考:
http://hw1287789687.iteye.com/admin/blogs/2156296
http://hw1287789687.iteye.com/admin/blogs/2155772
相关推荐
主要介绍了js实现获取div坐标的方法,通过调用jQuery插件实现获取div元素坐标的功能,非常简单实用,需要的朋友可以参考下
js获取指定位置的div坐标，方便用户得到网页上的任何div元素的坐标位置
一个小demo，3d空间坐标转平面坐标，div固定于3d空间系中得某一点
z=obj.style.zIndex //获取对象的z轴坐标值 //设置对象的z轴坐标值为100，确保当前层显示在最前面 obj.style.zIndex=100 x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标 y=event.offsetY
JQ JS javascript layui UI组件 元素 div 拖动插件JQ JS javascript layui UI组件 元素 div 拖动插件
代码如下: <div id=”testDiv”>放在我上面</div> [removed] $(‘#testDiv’).mousemove(function(e) { var xx = e.originalEvent.x || e.... [removed] javascript获取鼠标当前位置坐标 鼠标滑动显示鼠标的当前位
JS获取DIV相对坐标</TITLE> [removed]<!– function getX(obj){ var parObj=obj; var left=obj.offsetLeft; while(parObj=parObj.offsetParent){ left+=parObj.offsetLeft; } return left; } function ...
获取鼠标坐标，并且根据鼠标所在div弹出不同内容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <... <...
JavaScript实现移动小精灵的案例代码 ...想方设法：先获取到坐标 鼠标点击获取盒子中的位置，出现坐标？ 代码如下（示例）： <script> <div class="box"></div> document.querySelector('.box').addEv
利用onmousemove事件，然后获取鼠标的坐标，之后把DIV挨个遍历，最后把鼠标的坐标赋给DIV。 代码： 代码如下:<head runat=”server”> <title></title> <style type=”text/css”> div ...
js是通过 Key=event.keyCode 语句获取键盘码，再在多分支 switch 结构里分别处理。看完这些代码就会对浏览器里的键盘控制有所了解了。 当然该段代码的最大价值还是让我们了解到网页游戏的大概写法，而算法其实是最...
有时候，我们需要得到窗口拖动或者鼠标移动的距离，此时可以通过计算鼠标前后在页面中的位置来得到想要的结果，下面介绍几个事件属性: ... //获取元素 EventUtil.on(div, click, function(event){ event = EventUtil.g
前段时间写了一个简单的div拖动效果，...还有一点要注意的是在PC端获取当前鼠标的坐标是：event.clientX和event.clientY，在移动端获取坐标位置则是：event.touches[0].clientX和event.touches[0].clientY。 下面就来说
14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...
//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 } //地图事件设置函数： function setMapEvent(){ map.enableDragging();//启用地图拖拽事件，默认启用(可不写) ...
14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...
14.10.2 〈div〉容器 14.10.3 绝对定位 14.10.4 相对定位 14.10.5 z索引和三维 14.11 如何与JavaScript融合 14.11.1 什么是DHTML 14.11.2 JavaScript如何操作样式表 14.11.3 ...
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。 例如： div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); } 注意position:absolute的设置是必须的（详细...
本项目结合前端的最基本的三个技术，HTML5，css,javascript开发出的一个放大镜效果,结合设备坐标和display的显隐，再利用鼠标的onmousemove事件和onmouseover事件结合，来设置鼠标经过小盒子 显示遮罩和大盒子鼠标...