如何利用js向指定位置添加一个div层?

如何利用js向指定位置添加一个div层?,第1张

把外链接的JS加载到body后面,在这个JS里面用类似这样的代码:

var div = document.createElement('div') // 新增元素

var diva = document.getElementById('a') // 获取id为a的元素 diva.parentNode.insertBefore(div, diva) // 在这个元素前面增加上去

1、利用js代码首先创建一个div,document.createElement('div')

2、确认div添加位置,可以在某个dom元素后面,或者通过css属性控制具体位置,主要通过left/top等属性控制。

3、确定位置之后,显示div即可。

示例:比如html中有一个文本输入框,我们现在需要在挨着输入框右下角位置显示一个div。

<input type="text" id="city" value="beijing"/>

方法:

function createDiv(){

    //首先创建div

    var descDiv = document.createElement('div')

    document.body.appendChild(descDiv)

    //获取输入框dom元素

    var text = document.getElementById('city')

    //计算div的确切位置

    var seatX = text.offsetLeft + text.offsetWidth//横坐标

    var seatY = text.offsetTop + text.offsetHeight//纵坐标

    //给div设置样式,比如大小、位置

    var cssStr = "z-index:5width:420pxheight:300pxbackground-color:#FFFF99border:1px solid blackposition:absoluteleft:" 

    + seatX + 'pxtop:' + seatY + 'px'

    //将样式添加到div上,显示div

    descDiv.style.cssText = cssStr

    descDiv.innerHTML = '这是一个测试的div显示的内容'

    descDiv.id = 'descDiv'

    descDiv.style.display = 'block'

}


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/7983980.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-12
下一篇2023-04-12

发表评论

登录后才能评论

评论列表(0条)

    保存