关于js获取id的坐标有关问题
日期：2014-05-16 浏览次数：20438 次
关于js获取id的坐标问题
今儿个写个下拉菜单效果，需要获取title的id，然后获取该id的坐标，给弹出菜单一个显示位置。
问题来了：在ie8和ff里面，可以获取到该id的坐标，而ie7、ie6获取的坐标都是0,0....
是命名可能重复？...改了好几个名字还是获取不到...
求解...
网页源代码：
js代码：
IE6下表现：
IE8下表现
------解决方案--------------------
var x=$("#chanpin").offset().left
var y=$("#chanpin").offset().top + $("#chanpin").height();
------解决方案--------------------
offsetLeft/offsetTop等都相对已经定位的父级元素的偏移值，
父元素要定位为:absolute/relative，如果父元素不定位就相对顶级对象.
是否是你的css影响到了?
给你个地址你可以参考一下:
http://www.cnblogs.com/jilleanwong/archive/2008/09/22/1295783.html
------解决方案--------------------
JQUERY是兼容IE6+和火狐的
JAVASCRIPT下得到绝对位置脚本代码 需要循环所有的父
1function GetPosition(obj)
2{
3 var left = 0;
4 var top = 0;
5
6 while(obj != document.body)
7 {
8 left = obj.offsetLeft;
9 top = obj.offsetTop;
10
11 obj = obj.offsetParent;
12 }
13
14 alert("Left Is : " + left + "\r\n" + "Top Is : " + top);
15}
今儿个写个下拉菜单效果，需要获取title的id，然后获取该id的坐标，给弹出菜单一个显示位置。
问题来了：在ie8和ff里面，可以获取到该id的坐标，而ie7、ie6获取的坐标都是0,0....
是命名可能重复？...改了好几个名字还是获取不到...
求解...
网页源代码：
- HTML code
<div class="top1" id="menu_img">
<a id="chanpin">策划案例</a>
<a href="#" id="no">旅游婚纱</a>
<a id="no" href="server.html">服务项目</a>
<a id="no" href="aboutus.html">关于我们</a>
<a id="no" href="index.html" style="margin:0 10px 0 20px;; background:none; width:190px; height:87px;"><img src="images/index_03.jpg"/></a>
<a id="no" href="news.html">最新新闻</a>
<a id="no" href="contact.html">联系我们</a>
<a id="no" href="blong.html">博 客</a>
<a id="no" href="weibo.html">微 博</a>
</div>
js代码：
- JScript code
$("#chanpin").mouseover(function(){
var menu_img=document.getElementById("chanpin");
var x=menu_img.offsetLeft;
var y=menu_img.offsetTop;
$("#sub_menu").css({"top": (y+35)+"px", "left": (x+0)+"px" }).show("fast");
$("#chanpin").css({"background":"#80064a",
"color":"#fff"
});
})
IE6下表现：
IE8下表现
------解决方案--------------------
var x=$("#chanpin").offset().left
var y=$("#chanpin").offset().top + $("#chanpin").height();
------解决方案--------------------
offsetLeft/offsetTop等都相对已经定位的父级元素的偏移值，
父元素要定位为:absolute/relative，如果父元素不定位就相对顶级对象.
是否是你的css影响到了?
给你个地址你可以参考一下:
http://www.cnblogs.com/jilleanwong/archive/2008/09/22/1295783.html
------解决方案--------------------
JQUERY是兼容IE6+和火狐的
JAVASCRIPT下得到绝对位置脚本代码 需要循环所有的父
1function GetPosition(obj)
2{
3 var left = 0;
4 var top = 0;
5
6 while(obj != document.body)
7 {
8 left = obj.offsetLeft;
9 top = obj.offsetTop;
10
11 obj = obj.offsetParent;
12 }
13
14 alert("Left Is : " + left + "\r\n" + "Top Is : " + top);
15}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
