JS 设置 DIV 的位置

JavaScript026

JS 设置 DIV 的位置,第1张

var p = document.getElementById("div1")

p.style.position = "absolute"

p.style.left="100px"

p.style.top="100px"

参考如下:

<input type="text">

<div id="divShow" style="display:noneposition:absolute">显示的内容;</div>

display:none,表示此层隐藏;

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

添加事件,完成效果;

<script type="text/javascript">

function showDiv(obj) {

// 保存元素;

var el = obj

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

var left = obj.offsetLeft

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

var top = 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>

<input type="text" onfocus="showDiv(this)">

<div id="divShow" style="display:noneposition:absolute">显示的内容;</div>

注意:

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

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

最终效果如下: