js改变div的位置？

Answer 1

JS设置DIV的位置

varp=document.getElementById("div1");

p.style.position="absolute";

p.style.left="100px";

p.style.top="100px";

把div交换位置，用js！

html

head

scripttype="text/javascript"src="/jquery/jquery.js"/script

scripttype="text/javascript"

$(document).ready(function(){

varp_1=document.getElementById('p1');

varp_2=document.getElementById('p2');

vard_c=document.createElement("div");

d_c=p_1;

d_c.id='p3'

vard_d=document.createElement("div");

d_d=p_2;

d_d.id='p4'

//alert(d_d.innerHTML);

$(".btn1").click(function(){

//$("#p2").replaceWith($("#p4").html());

//$("#p1").replaceWith($("#p3").html());

$("#p2").replaceWith("div4444/div");

$("#p1").replaceWith("div3333/div");

//$("#p1").replaceWith($t("#p4").html());

//alert($("#p3").text());

//alert($("#p4").text());

});

});

/script

style

div{height:20px;background-color:yellow}

/style

/head

body

divid='p1'Thisisaparagraph.11111/div

divid='p2'Thisisanotherparagraph.222222/div

divid='div1'333333333/div

buttonclass="btn1"用粗体文本替换所有段落/button

/body

/html

javaScript改变div的位置

参考如下：

inputtype="text"

divid="divShow"style="display:none;position:absolute;"显示的内容；/div

display:none，表示此层隐藏；

position:absolute，表示此层的为绝对位置，方便后期进行绝对定位

添加事件，完成效果；

scripttype="text/javascript"

functionshowDiv(obj){

//保存元素；

varel=obj;

//获得元素的左偏移量；

varleft=obj.offsetLeft;

//获得元素的顶端偏移量；

vartop=obj.offsetTop;

//循环获得元素的父级控件，累加左和顶端偏移量；

while(obj=obj.offsetParent){

left+=obj.offsetLeft;

top+=obj.offsetTop;

}

//设置层的坐标并显示；

document.all.divShow.style.pixelLeft=left;

//层的顶端距离为元素的顶端距离加上元素的高；

document.all.divShow.style.pixelTop=top+el.offsetHeight;?

document.all.divShow.style.display="block";

}

/script

style

#divShow?

{

width:150px;

height:180px;

border-width:thin;

background:yellow;

}

/style

inputtype="text"onfocus="showDiv(this);"

divid="divShow"style="display:none;position:absolute;"显示的内容；/div

注意：

offsetLeft和OffsetTop不是获得元素和页面的距离，只是获得元素和父元素的的距离，所以要进行while循环一层层累加距离，最后得到元素和页面之间的距离

层次关系：本元素-父元素-……body-null，当为null时，退出while循环。

最终效果如下：