怎么通过js设置div浮动层的相对位置

JavaScript051

怎么通过js设置div浮动层的相对位置,第1张

1、利用js代码首先创建一个div，document.createElement('div')2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。 3、确定位置之后，显示div即可。 示例：比如html中有一个文本输入框，...

参考如下：

<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循环。

最终效果如下：

<body>

<div id="div1" style="width:100px height:100px background:#ccc"></div>

</body>

<script>

var oDiv = document.getElementById('div1')

oDiv.style.position = 'fixed'

oDiv.style.top = '20px'

oDiv.style.left = '20px'

</script>

主要思想就是，在js中修改div的位置。所有的赋值，都可以计算后再传值，这样就不想CSS中只能写一个值了。