`

定位div

jQueryCSSCC++C# 
阅读更多 
<!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 onclick="creatediv(this)"></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>
分享到：
| 配置多个dwr 文件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics