js 序号重新排列问题

JavaScript05

js 序号重新排列问题,第1张

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'

}

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'

}