none
js获取页面控件坐标 RRS feed

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

    问题描述：页面有一个div和image控件。最终结果是需要div的内容显示在image的右下角。我的想法是在页面加载时先获得image控件的坐标，然后根据这个坐标来设置div的坐标，达到最终需要的效果。但现在我无法通过js来得到image的坐标。请教各位image的坐标怎么得到？谢谢先。下面给出相关代码：
    <tr>
        <td align="center" valign="bottom">
            <img id="imgSubject" src="Images/hero_highjump_img.jpg" width="810px" style="height: 200px"/>
        </td>
    </tr>

    <div id="divScroll" style="z-index:1; position:absolute;">
            <table cellpadding="0px" cellspacing="0px" border="0">
                <tr>
                    <td>
                        <script language="javascript" type="text/javascript">
                            var marqueeContent=new Array(); //滚动主题
                            marqueeContent[0]='&nbsp;<img alt="" src="Images/gif-0306.gif" align="absmiddle" />&nbsp;<a href="thirdPage/otherNews.aspx" target="_blank" style="color: #17375e">企业质量信息化的建设之路新时代中国企业的必由之路</a><img alt="" src="Images/gif-0493.gif" align="baseline" />'
                            marqueeContent[1]='&nbsp;<img alt="" src="Images/gif-0306.gif" align="absmiddle" />&nbsp;<a href="thirdPage/otherNewsOne.aspx" target="_blank" style="color: #17375e">如何“又好又快”的进行企业质量信息系统的构建</a><img alt="" src="Images/gif-0493.gif" align="baseline" />';
                            var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
                            var marqueeId=0;
                            var marqueeDelay=5000;
                            var marqueeHeight=14;

                            function initMarquee()
                            {
                                var str=marqueeContent[0];
                                document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
                                marqueeId++;
                                marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
                            }

                            function startMarquee()
                            {
                                var str=marqueeContent[marqueeId];
                                marqueeId++;
                                if(marqueeId>=marqueeContent.length)
                                {
                                    marqueeId=0;
                                }
                                if(marqueeBox.childNodes.length==1)
                                {
                                    var nextLine=document.createElement('DIV');
                                    nextLine.innerHTML=str;
                                    marqueeBox.appendChild(nextLine);
                                }
                                else
                                {
                                    marqueeBox.childNodes[0].innerHTML=str;
                                    marqueeBox.appendChild(marqueeBox.childNodes[0]);
                                    marqueeBox.scrollTop=0;
                                }
                                clearInterval(marqueeInterval[1]);
                                marqueeInterval[1]=setInterval("scrollMarquee()",10);
                            }
                            
                            function scrollMarquee()
                            {
                                marqueeBox.scrollTop++;
                                if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight)
                                {
                                    clearInterval(marqueeInterval[1]);
                                }
                            }
                            initMarquee();
                        </script>
                    </td>
                </tr>
            </table>
        </div>

    zy
    2009年4月14日 6:26
    |

答案

  • Question
    登录进行投票
    1
    登录进行投票 
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function get_Text() {
					m = document.getElementById("mxh")
					var w=0,h=0;
					while(m.offsetParent)
					{
						w += m.offsetLeft;
						h += m.offsetTop;
						m = m.offsetParent;
					}
					alert(w)
        }
    </script>
</head>
<body>
sdsdddddd<img src="http://www.google.com/help/hc/images/google_logo_sm.gif" id="mxh" />
    <input type="button" value="get" onclick="get_Text()"/>
</body>
</html>
    孟宪会
    • 已标记为答案 张烨 2009年4月14日 8:40
    2009年4月14日 8:26
    |
    版主

全部回复

  • Question
    登录进行投票
    1
    登录进行投票 
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function get_Text() {
					m = document.getElementById("mxh")
					var w=0,h=0;
					while(m.offsetParent)
					{
						w += m.offsetLeft;
						h += m.offsetTop;
						m = m.offsetParent;
					}
					alert(w)
        }
    </script>
</head>
<body>
sdsdddddd<img src="http://www.google.com/help/hc/images/google_logo_sm.gif" id="mxh" />
    <input type="button" value="get" onclick="get_Text()"/>
</body>
</html>
    孟宪会
    • 已标记为答案 张烨 2009年4月14日 8:40
    2009年4月14日 8:26
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票
    另外还可以使用css技巧来实现
    孟宪会
    2009年4月14日 8:34
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票
    To：孟宪会：非常感谢：）
    zy
    2009年4月14日 8:40
    |