六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 255|回复: 0

定位div

[复制链接]

升级  23.33%

76

主题

76

主题

76

主题

举人

Rank: 3Rank: 3

积分
270
 楼主| 发表于 2013-2-8 00:45:27 | 显示全部楼层 |阅读模式
<!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>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表