用Javascript设置DIV的绝对位置

在实际的开发中，我们经常要做到以下的效果：

虽然操作是很简单，但是相信大多数人都是“拿来主义”者，不会关心代码。
呵呵，其实今天自己也是被问到了，所以特别关注了一下DIV位置的确定。

废话少说，先建立一个htm页面

<input type="text">
<div id="divShow" style="display:none;position:absolute;">显示的内容</div>

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

添加事件，完成效果

// 循环获得元素的父级控件，累加左和顶端偏移量
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" οnfοcus="showDiv(this);">
<div id="divShow" style="display:none;position:absolute;">显示的内容</div>

注：offsetLeft和OffsetTop不是获得元素和页面的距离，只是获得元素和父元素的的距离
所以要进行while循环一层层累加距离，最后得到元素和页面之间的距离
层次关系：本元素->父元素->……>body->null，当为null时，退出while循环

点击后的最终效果：）

用Javascript设置DIV的绝对位置相关推荐

php 网格,php – 在网格上的随机位置设置div
我试图制作一个占据浏览器窗口宽度100%的网格,首先我不知道如何去做这个网格,其次我想要一个div在该网格中有一个随机位置,但是只有在没有被占用的情况下才填补该位置. 我想我的问题是,如何进行,如果可 ...
html中如何写div中div的位置,position设置div的位置
css怎么调整div的位置可以使用css中的position来对div进行定位来改变div的位置,position可能的值如下: 工具原料:编辑器.浏览器通过设置一个div的position的值来 ...
background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
php 连续点击事件,javascript设置连续两次点击按钮时间间隔的方法_javascript技巧...
本文实例讲述了javascript设置连续两次点击按钮时间间隔的方法,分享给大家供大家参考.具体实现方法如下: 很多时候我们在实际应用中,可能并不希望按钮联系被不间断的点击,所以要限定一定的时间间隔才 ...
java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动
原标题:html标签overflow属性和javascript实现div标签滚动昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scro ...
html页面设置不可点击事件,css怎么设置div不可点击？
这篇文章介绍的是通过纯CSS实现禁止div的鼠标点击事件,比起Javascript来更加灵活,有需要的可以参考学习. css怎么设置div不可点击? JavaScript有一个preventDefau ...
javascript座标_javascript JS元素位置和位置坐标
常见的属性: 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.bo ...
javascript实现div层移动的减速效果
其实原理很简单,当一个div层从起始位置到最终终点位置(endX,endY)的过程中,假设每10ms移动一次.那么利用一个目标值(终点坐标)减去当前div层的位置除以一个定长来作为下次div层要移动的 ...
可编辑div在光标位置插入指定内容
可编辑div在光标位置插入指定内容 //在光标位置插入内容 insertContent(content) {if (!content) {//如果插入的内容为空则返回return;}let sel = ...

用Javascript设置DIV的绝对位置

用Javascript设置DIV的绝对位置相关推荐

最新文章

热门文章