定位div

最新推荐文章于 2022-09-19 12:06:07 发布

iteye_133

最新推荐文章于 2022-09-19 12:06:07 发布

阅读量85

点赞数

分类专栏： Javascript 文章标签： jQuery CSS C C++ C# ViewUI

本文链接：https://blog.csdn.net/iteye_133/article/details/81963409

版权

Javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏


<!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>