JS中怎么获取input所在页面的绝对坐标

Question

<table  cellpadding=6>
    <tr><th colspan=2>用例比较</th></tr>
      <tr>
    <td> 请选择测试用例目录：<input id="getfolder1" type="text" class=input_text onfocus="fcu(this)" onmouseover="over(this)" ondblclick="dclick('Button1')" tabindex="1" onmouseout="out(this)"  /></td>
    <td>
    &nbsp&nbsp&nbsp<input id="Button1" type="button" value="浏览.." tabindex=-1   onclick="browse1()" /><br />
    </td>
    </tr>
    <tr>
    <td>  请选择手工用例目录：<input id="getfolder2" type="text" class="input_text" tabindex="2" onfocus="fcu(this)" onmouseover="over(this)" ondblclick="dclick('Button2')" onmouseout="out(this)" /> </td>
    <td>
    &nbsp&nbsp&nbsp<input id="Button2" type="button" value="浏览.." tabindex=-1 onclick="browse2()" />
    </td>
    </tr>    <tr>
      <td>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是否显示日志：<input type=checkbox checked=checked style="background-color:#D2E5F4" onclick="change(this)" tabindex=-1 />
    </td>    <td align="right">
  
      <input id="Button3" type="button" value="开始比较" accesskey="enter" tabindex=-1 onclick="return Button3_onclick()" />
    </td>
    </tr>    </table>简单的说就是  想在输入框中，谈出一个层。可以提示的那种。。 层根据input的位置变化而改变。
var offsetTop = arg.offsetTop;    var offsetLeft = arg.offsetLeft;    var offsetWidth = arg.offsetWidth;
    var offsetHeight = arg.offsetHeight;这些都不行啊，都是获得本身的属性。有谁顶个，告诉我。3Q

Answer 1

function pageX(elem) {
   return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}function pageY(elem) {
   return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}用这2个方法获取位置看看~

Answer 2

//将要获取绝对位置的标签传进去，返回一个包含x和y属性的对象
function getPosition(e)
{  
var t=e.offsetTop;  
        var l=e.offsetLeft;  
        while(e=e.offsetParent)
        { 
             t+=e.offsetTop; 
             l+=e.offsetLeft; 
        }   
        var point = eval("({x:"+l+",y:"+t+"})");
        return point;
}

Answer 3

  var strs = "";
//    strs += "<iframe id=\"fram\" frameborder=0 style=\"display:none; width:100%; height:768px; left:0px; top:0px; position:absolute; background-color:blue; z-index:60\">";
//    strs+="</iframe>";
    strs+="<div id=\"diilog\" style=\"display:none; width:100%; height:768px; background-color:silver; position:absolute; left:0px; top:0px; FILTER:Alpha(Opacity=50); z-index:97;\">";
    strs+="<\/div>";
    strs+="<div id=\"shaw\" style=\"width:300px; height:200px; position:absolute; display:none; z-index:98; background-color:Gray; \">";
    strs+="<\/div>";
    strs+="";
    strs+="<div id=\"childShow\" style=\"width:300px; text-align:left; height:200px; position:absolute; display:none; z-index:99; background-color:#eaf5f7;\" >";
    strs+="<div style=\"width:100%\">";
    strs+="<table border=\"0\" cellpadding=10>";
    strs += "<tr><td colspan=2 style=\"background-image:url(\'Image/white-top-bottom.gif\');background-repeat:repeat-x;\"><font color=\"gray\">温馨提示：<\/font><\/td><\/tr>";
    strs+="<tr>";
    strs += "<td><img src=\"Image/logo.gif\" \/><\/td>";
    strs+="";
    strs += "<td><font color=\"blue\">当前浏览器没有安装flash插件<\/br>将无法使用本页面功能！<\/br>请点击>><a href=\"Tools/install_flash_player_ax.exe\" style=\"color:Red\" >安装<\/a><\/font><\/td>";
    strs+="<\/tr>";
    strs+="<tr>";
    strs += "<td align=center><input type=\"button\" value=\"安装完成\" class=input_button onmouseover=\"bt_over(this)\" onfocus=\"blur()\" onmouseout=\"bt_out(this)\" onclick=\"_uFlash()\"  \/><\/td>";
    strs += "<td align=center><input type=\"button\"  value=\"暂不安装\" class=input_button onmouseover=\"bt_over(this)\" onfocus=\"blur()\" onmouseout=\"bt_out(this)\" onclick=\"ok()\"\/><\/td>";
    strs+="<\/tr>";
    strs+="<\/table>";
    strs+="";
    strs+="<\/div>";
    strs += "<\/div>";
           document.write(strs);

Answer 4

function init() {
    var strs = "";
//    strs += "<iframe id=\"fram\" frameborder=0 style=\"display:none; width:100%; height:768px; left:0px; top:0px; position:absolute; background-color:blue; z-index:60\">";
//    strs+="</iframe>";
    strs+="<div id=\"diilog\" style=\"display:none; width:100%; height:768px; background-color:silver; position:absolute; left:0px; top:0px; FILTER:Alpha(Opacity=50); z-index:97;\">";
    strs+="<\/div>";
    strs+="<div id=\"shaw\" style=\"width:300px; height:200px; position:absolute; display:none; z-index:98; background-color:Gray; \">";
    strs+="<\/div>";
    strs+="";
    strs+="<div id=\"childShow\" style=\"width:300px; text-align:left; height:200px; position:absolute; display:none; z-index:99; background-color:#eaf5f7;\" >";
    strs+="<div style=\"width:100%\">";
    strs+="<table border=\"0\" cellpadding=10>";
    strs += "<tr><td colspan=2 style=\"background-image:url(\'Image/white-top-bottom.gif\');background-repeat:repeat-x;\"><font color=\"gray\">温馨提示：<\/font><\/td><\/tr>";
    strs+="<tr>";
    strs += "<td><img src=\"Image/logo.gif\" \/><\/td>";
    strs+="";
    strs += "<td><font color=\"blue\">当前浏览器没有安装flash插件<\/br>将无法使用本页面功能！<\/br>请点击>><a href=\"Tools/install_flash_player_ax.exe\" style=\"color:Red\" >安装<\/a><\/font><\/td>";
    strs+="<\/tr>";
    strs+="<tr>";
    strs += "<td align=center><input type=\"button\" value=\"安装完成\" class=input_button onmouseover=\"bt_over(this)\" onfocus=\"blur()\" onmouseout=\"bt_out(this)\" onclick=\"_uFlash()\"  \/><\/td>";
    strs += "<td align=center><input type=\"button\"  value=\"暂不安装\" class=input_button onmouseover=\"bt_over(this)\" onfocus=\"blur()\" onmouseout=\"bt_out(this)\" onclick=\"ok()\"\/><\/td>";
    strs+="<\/tr>";
    strs+="<\/table>";
    strs+="";
    strs+="<\/div>";
    strs += "<\/div>";
           document.write(strs);
////    var str = "";
////    str += "<div id=\"diilog\" style=\"display:none; width:100%; height:768px; background-color:#eaf5f7; position:absolute; left:0px; top:0px; FILTER:Alpha(Opacity=70); z-index:997;\">";
////    str += "<\/div>";
////    str += "<div id=\"shaw\" style=\"width:300px; height:200px; position:absolute; display:none; z-index:998; background-color:Gray; \">";
////    str += "<\/div>";
////    str += "";
////    str += "<div id=\"childShow\" style=\"width:300px; text-align:left; height:200px; position:absolute; display:none; z-index:999; background-color:Silver;\" >";
////    str += "<div style=\"width:100%\">";
////    str += "<input id=\"localPath\" type=\"text\"\/>";
////    str += "<input id=\"file\" type=\"button\" value=\"浏览\" onclick=\"brow()\" \/>";
////    str += "<input type=\"button\" value=\"确定\" onclick=\"ok()\" \/>";
////    str += "<\/div>";
////    str += "<\/div>";    //document.write(str);}

Answer 5

上面是谈出层的第二步
下面是第一步
init();
function main() {    var child = document.getElementById("childShow");
    var shaw = document.getElementById("shaw");
    document.getElementById("diilog").style.display = "block";
    //document.getElementById("fram").style.display = "block";
    shaw.style.display = "block";
    child.style.display = "block";
    resize();
    window.onresize = resize;
    window.onscroll = resize;}

Answer 6

这个方法可行的  我测试过的  function  show(e,msg)   {   
var div1 = document.getElementById(e); //将要弹出的层 
div1.style.display="block"; //div1初始状态是不可见的，设置可为可见 
div1.innerHTML=msg;
//window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状. 
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
div1.style.left=event.clientX+10; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容 
div1.style.top=event.clientY+5; 
div1.style.position="absolute"; //必须指定这个属性，否则div1层无法跟着鼠标动   
  }