|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!--//计算位置的函数:元素,属性function calculateOffset(field, attr) { var offset = 0; while (field) { //文本框[属性],这种写法得到当前元素相对于父元素的偏移值 offset += field[attr]; field = field.offsetParent; } return offset;}onload=function(){var Obj = document.getElementById("d");var div = document.getElementById("dd");var W = Obj.offsetWidth ;var L = calculateOffset(Obj,"offsetLeft")var T = calculateOffset(Obj,"offsetTop") div.style.left=L+"px";div.style.top=T+Obj.offsetHeight+"px";div.style.width=W +"px";} //--> </SCRIPT> </HEAD> <BODY> <TABLE width=90% height=300 border="1" bgcolor="red"> <TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD> </TR> <TR><TD></TD><TD></TD><TD></TD><TD><input id="d"/></TD><TD></TD> </TR> <TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD> </TR> </TABLE> </BODY> <div style="position:absolute;height:60px; background:yellow;border:1px blue solid" id="dd">asdf</div></HTML>
<SCRIPT LANGUAGE="JavaScript"> <!--function creatediv(obj){cleardiv() ;var w ; // 宽var h = "100" ; // 高var l ; // 左边距var t ; // 上边距 w = obj.offsetWidth ;l = obj.offsetLeft ;t = obj.offsetTop+obj.offsetHeight ;var temp = obj.offsetParent ;while(temp){l+=temp.offsetLeft ;t+=temp.offsetTop ;temp=temp.offsetParent ;}var div = document.createElement("div");div.id ="div" ;div.innerHTML="abc" ;with(div.style){position="absolute";width=w +"px";height=h+"px" ;left=l+"px";top=t+"px";backgroundColor="red";borderColor="black";}div.onclick=function(){document.body.removeChild(this);} // alert(div.innerHTML);document.body.appendChild(div); //alert(w+" "+h+" "+l+" "+t);}function cleardiv(){var d = document.getElementById("div") ;if(d){document.body.removeChild(d);}} //--> </SCRIPT> <center> <div style="width:80%;background:yellow"> <TABLE width="90%" border="1"> <TR><TD>a</TD><TD>b</TD><TD>c</TD><TD>d</TD><TD>e</TD> </TR> <TR><TD>a</TD><TD>b</TD><TD>c</TD><TD>d</TD><TD>e</TD> </TR> <TR><TD>a</TD><TD>b</TD><TD><input ></TD><TD>d</TD><TD>e</TD> </TR> <TR><TD>a</TD><TD>b</TD><TD>c</TD><TD>d</TD><TD>e</TD> </TR> </TABLE> </div> </center>
<script> //jQuery method$(function(){var O_ = $("#d").offset();$("#dd").css({"left":O_.left+"px","top":(O_.top+$("#d").height()+5)+"px"});$("#dd").width($("#d").width());}); </script> |
|