高人进来帮我看一下这个关于this的问题

this就是Point这个类
//////////////////////
不是吧...
fGetXY方法的目的就是通过传递一个元素,返回它的绝对位置...

http://bbs.51js.com/thread-56838-1-1.html

急求高手帮我调一下,使得能把fGetXY()方法放到元素外面调用,谢谢!

代码写规范点就没事了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">

function Point(iX, iY){
this.x = iX;
this.y = iY;
}

function fGetXY(aTag){
  var oTmp = aTag;
  var pt = new Point(0,0);
  do {
  pt.x += oTmp.offsetLeft;
  pt.y += oTmp.offsetTop;
  oTmp = oTmp.offsetParent;
  } while(oTmp.tagName!="BODY");
  return pt;
}
</script>
</HEAD><BODY><table width="82%" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <td width="36%"> </td>
    <td width="36%"> </td>
    <td width="28%"> </td>
  </tr>
  <tr>
    <td height="35"> </td>
<td>
<div>

<input type="text" style="width:120px" id="ice" onclick="var point=fGetXY(this);alert(point.x+' '+point.y);" />

</div>
</td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<script language="javascript">
var pt=fGetXY(document.getElementById('ice'));
alert(pt.x+' '+pt.y);
</script></BODY>
</HTML>

哦,一定要写代码放在最外层document.getElementById才有效啊。不过这里还有一个问题：
我新加了一个updatePostition()的方法，在body onResize的时候调用，想无论页面的大小怎么改变，让select元素通过绝对定位来与那个input保持重合，但是实现不了，好像是style.left那里有问题。代码如下：
-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">

function Point(iX, iY){
this.x = iX;
this.y = iY;
}

function fGetXY(aTag){
  var oTmp = aTag;
  var pt = new Point(0,0);
  do {
  pt.x += oTmp.offsetLeft;
  pt.y += oTmp.offsetTop;
  oTmp = oTmp.offsetParent;
  } while(oTmp.tagName!="BODY");
  pt.x++;
  pt.y++;
  return pt;
}
function updatePosition(){
var pt=fGetXY(document.getElementById('ice'));
combo=document.getElementById('combo');
combo.style.left=pt.x;
combo.style.top=pt.y;
}
</script>
</HEAD><body onResize="updatePosition()">
<table width="82%" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <td width="36%"> </td>
    <td width="36%"> </td>
    <td width="28%"> </td>
  </tr>
  <tr>
    <td height="35"> </td>
<td> </td>
    <td><input name="text" type="text" id="ice" style="width:120px" /></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<script language="javascript">
var pt=fGetXY(document.getElementById('ice'));
document.write("<select id=combo onchange=\"ice.value=this.value\" style=\"position:absolute;left:"+pt.x+"px;top:"+pt.y+"px;width:120px;clip:rect(auto,auto,auto,100px)\">");
document.write("<option value=\"aaa\">aaa</option>");
document.write("<option value=\"bbb\">bbb</option>");
document.write("<option value=\"ccc\">ccc</option>");
document.write("</select>");
</script>
</BODY>
</HTML>

function updatePosition(){
var pt=fGetXY(document.getElementById('ice'));
combo=document.getElementById('combo'); //就是这一行combo先定义一下改成var combo=..
combo.style.left=pt.x;
combo.style.top=pt.y;
}
在javascript函数里定义的代码最好先定义。。

chaonan(R.Honker) 你是我的偶像! 谢谢!

我把这个效果专门写到js文件里面,直接在需要的地方用putComboBox();显示出来,如果放在table会出问题.  不知道有没有办法解决?---------combobox.js----------

function Point(iX, iY){
this.x = iX;
this.y = iY;
}
function fGetXY(aTag){
  var oTmp = aTag;
  var pt = new Point(0,0);
  do {
  pt.x += oTmp.offsetLeft;
  pt.y += oTmp.offsetTop;
  oTmp = oTmp.offsetParent;
  } while(oTmp.tagName!="BODY");
  return pt;
}
function updatePosition(){
for(i=1;i<n+1;i++){
var pt=fGetXY(document.getElementById('combo_input'+i));
var combo=document.getElementById('combo_box'+i);
combo.style.left=pt.x;
combo.style.top=pt.y;
}
}var n=0;
function putComboBox(){
n++;
document.write("<input name=\"combo_input"+n+"\" id=\"combo_input"+n+"\" type=\"text\" style=\"width:120px\" />");
var pt=fGetXY(document.getElementById('combo_input'+n));
document.write("<select id=combo_box1 onchange=\"combo_input"+n+".value=this.value\" style=\"position:absolute;left:"+pt.x+"px;top:"+pt.y+"px;width:120px;clip:rect(2px,119px,20px,101px)\">");
document.write("<option value=\"aaa\">aaa</option>");
document.write("<option value=\"bbb\">bbb</option>");
document.write("<option value=\"ccc\">ccc</option>");
document.write("</select>");
}---------test.htm------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript" src="combobox.js"></script></HEAD><body>
<table width="82%" border="1" cellspacing="0" cellpadding="1">
  <tr>
    <td width="36%"> </td>
    <td width="36%"> </td>
    <td width="28%"> </td>
  </tr>
  <tr>
    <td height="35"> </td>
<td>

<script language="javascript">
putComboBox();
</script>
</td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

         
<script language="javascript">
putComboBox();
</script>
</BODY>
</HTML>

这牵涉到浏览器执行代码的机制问题。。
就象你前面函数里定义的变量未经过定义导致错误一样
你可以参考以下《javascript权威指南》这本书。。

你有没有检查两次不同调用情况下不同的pt.x和pt.y的值
他们两次调用的值是不一样的
这牵涉到浏览器执行代码的机制

给你这个例子你就清楚了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language="javascript">
var n=0;
function putComboBox(){
n++;
document.write("<input name=\"combo_input"+n+"\" id=\"combo_input"+n+"\" type=\"text\" style=\"width:120px\" />");
var pt=fGetXY(document.getElementById('combo_input'+n));
alert(pt.x+'  '+pt.y)
document.write("<select id=combo_box1 onchange=\"combo_input"+n+".value=this.value\" style=\"position:absolute;left:"+pt.x+"px;top:"+pt.y+"px;width:120px;clip:rect(2px,119px,20px,101px)\">");
document.write("<option value=\"aaa\">aaa</option>");
document.write("<option value=\"bbb\">bbb</option>");
document.write("<option value=\"ccc\">ccc</option>");
document.write("</select>");
}
function Point(iX, iY){
this.x = iX;
this.y = iY;
}function fGetXY(aTag){
  var oTmp = aTag;
  var pt = new Point(0,0);
  do {
  pt.x += oTmp.offsetLeft;
  pt.y += oTmp.offsetTop;
  oTmp = oTmp.offsetParent;
  } while(oTmp.tagName!="BODY");
  return pt;
}
function updatePosition(){
for(i=1;i<n+1;i++){
var pt=fGetXY(document.getElementById('combo_input'+i));
alert(pt.x+'  '+pt.y)
var combo=document.getElementById('combo_box'+i);
combo.style.left=pt.x;
combo.style.top=pt.y;
}
}
</script></HEAD><body>
<table width="82%" border="1" cellspacing="0" cellpadding="1">
  <tr>
    <td width="36%"> </td>
    <td width="36%"> </td>
    <td width="28%"> </td>
  </tr>
  <tr>
    <td height="35"> </td>
<td id="me">

<script language="javascript">
putComboBox()
    </script>
</td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

         
<script language="javascript">
updatePosition()
</script>
</BODY>
</HTML>
所以说代码要规范

调试易

高人进来帮我看一下这个关于this的问题

解决方案 »