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'
}
<meta http-equiv="Content-Type" content="text/html charset=utf-8"><script>
function addNumber() {
var t = document.getElementById("ta"), s = t.value.split("\n"), len = s.length
for (var i = 1 i <= len i++) {
if ("" != s[i - 1]) {
s[i - 1] = i + "." + s[i - 1]
}
}
t.value = s.join("\n")
}
</script>
<textarea id="ta" cols="30" rows="4"></textarea>
<input value="添加序号" type="button" onClick="addNumber()">
做的比较简单,粗糙,你先看看能不能满足你的基本需求
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)