JS里添加样式

JavaScript012

JS里添加样式,第1张

JS里添加样式的方法：

1、首先，要创建标签，使用document.createElement函数，如图创建div标签。使用其className设置class，id设置id，style设置样式。

2、样式的设置也可以分项进行。如图是分项设置其left，top，display，position，width几个样式。

3、通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。当然，也可以分项分层添加标签。

4、设置好标签（如图是div标签，变量名box），使用document.body.appendChild添加标签到body当中。

5、标签添加以后，依然可以修改样式，如图是使用document.getElementById方法根据id获取标签，修改style。

6、标签添加以后，也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。

当我们在写jsp页面时，往往会遇到这种情况：从后台获取的数据个数不确定，此时在前端写jsp页面时也就不确定怎么设计了。这个时候就需要通过js动态创建标签：

1.创建某个标签：如下在body中创建一个div的事例；

<script>

function

fun(){

var

frameDiv

=

document.createElement("div")//创建一个标签

var

bodyFa

=

document.getElementById("bodyid")//通过id号获取frameDiv

的父类（也就是上一级的节点）

bodyFa

.appendChild(frameDiv)//把创建的节点frameDiv

添加到父类body

中；

}

<script>

<body

id="bodyid"

>

<!--在此添加div标签-->

</body>

2.添加属性：给创建的标签添加相应的属性：

frameDiv

.setAttribute("id",

"divid")//给创建的div设置id值；

frameDiv

.className="divclass"

//给创建的div设置class；

//给某个标签添加显示的值；

var

h

=

document.createElement("h1")

h.innerHTML

=

data[i].name

var

p

=

document.createElement("p")

p.innerHTML

=

"要显示的值"

3.创建的标签添加事件：

a.不带参数：

frameDiv.onmousedown

=

fun//ps：函数名fun后面一定不能带括号，否则会在创建标签的时候执行函数，

而不是鼠标按下时执行；

b.有参数：

frameDiv.onmousedown

=

function(){

fun(this)

}

c.要调用的函数；

function

fun(){

alert("鼠标按下")

}

4.如果担心创建的标签没有被覆盖则可以替换：

var

divFlag

=

document.getElementById("divFlag")

var

divMain

=

document.createElement("div")

if(divFlag

!=

null){

body.replaceChild(divMain,

divFlag)//把原来的替换掉

}

divMain.setAttribute("id",

"divFlag")

以上这篇通过js动态创建标签,并设置属性方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:JS实现给对象动态添加属性的方法JS中动态创建元素的三种方法总结(推荐)js动态创建标签示例代码使用变量动态设置js的属性名