我写了一个网页，你保存成HTM文件就可以运行了。
你在设置坐标中输入对应的值，就可以获取到相对于页面的坐标了。
——这里告诉你如何获得页面坐标和设置页面坐标。
另外楼主不厚道哦，都没有分的。
<html>
<head>
<style type="text/css">
#test{
position:absolute;
left:100px;
top:100px;
}
</style>
<script type="text/javascript">
function click_me()
{
alert("div相对于页面的坐标:X="+documentall("test")currentStyleleft+" Y="+documentall("test")currentStyletop);
}
function set_pos()
{
documentall("test")styleleft=parseInt(ipt1value);
documentall("test")styletop=parseInt(ipt2value);
alert("坐标设置成功！");
}
</script>
</head>
<body>
<div id="test">测试<button onclick="click_me()">显示坐标</button> 输入横坐标：<input id=ipt1 type="text" size="3" />输入纵坐标：<input id=ipt2 type="text" size="3" /><button onclick="set_pos();">设置坐标</button></div>
</body>
</html>
首先要让DIV启用编辑模式
<div contenteditable=true id="divTest"></div>
通过设定contenteditable=true开启div的编辑模式这样DIV就可以跟文本框一样输入内容了。
不扯话题了。下面说怎么获取或设置光标位置
2个步骤
1：获取DIV中的光标位置
2：改变光标位置
var cursor = 0; // 光标位置
documentonselectionchange = function () {
var range = documentselectioncreateRange();
var srcele = rangeparentElement();//获取到当前元素
var copy = documentbodycreateTextRange();
copymoveToElementText(srcele);
for (cursor = 0; copycompareEndPoints("StartToStart", range) < 0; cursor++) {
copymoveStart("character", 1);//改变光标位置，实际上我们是在记录cursor的数量
}
}
给document绑定光标变化事件。用来记录光标位置
这样就可以拿到DIV的光标位置了
给要添加背景的div添加background样式
#div { background:url(/images/pic1jpg) no-repeat 10px 20px; }
其中10px是横坐标距离，20px纵坐标距离。
把div设置成相对定位或绝对定位，总之是让其拥有left,top值，
当鼠标移进div的时候获取鼠标的坐标，
用鼠标的left减去div的left值就是鼠标在div里面的left值，即鼠标在div中的x坐标，
同理，
用鼠标的top值减去div的top值就是鼠标在div里面的top值，即鼠标在div中的y坐标
这样我们就获取了鼠标在div中的位置了
看了一下，你这种情况用根据鼠标位置来定位的div层来做好像不合适，你想想如果鼠标在文本框上时你不是也要将层放到文本框上吧，你可以看看别人的网站 上的，都是单独做的，这样体验才会好你想偷懒的话可以这样，用表格布局，后面多加一列，专门放显示信息的，然后根据事件的源对象，将信息显示到指定的单元格中另，function getpostion(e)//为了同时支持IE和FireFox，e必须为event对象要想将div位置固定的话需要将其posistion属性设为absolute;ps:晕死，竟然让我打三遍
呵呵，，不知道你会不会JQUERY，给你一个JQ的代码吧：
获取IMG绝对X,Y坐标，可以用offset()方法：
var X = $('#img1')offset()top;
var Y = $('#img1')offset()left;
获取相对(父元素)位置:
var X = $('#img1')position()top;
var Y = $('#img1')position()left;
以上就是关于javascript 节点获取坐标(相对于屏幕\页面\...)全部的内容，包括:javascript 节点获取坐标(相对于屏幕\页面\...)、如何获取可编辑div或body里光标的像素位置、html的div+css中如何用横纵(x.y)坐标在一张包含十几个小图片元素的大图里取的小图片元素作为文字背景。大等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）