首页 > 编程技术 > js

JavaScript动态创建div属性和样式示例代码

发布时间:2013-10-13 07:27

1.创建div元素:

Javascript代码
复制代码 代码如下:

<scripttypescripttype="text/javascript">
functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);
}
</script>

<scripttypescripttype="text/javascript">
functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);
divFileitem.appendChild(divName); <!-- no "document" if not body-->
}
</script>

2.创建div的属性:

Javascript代码
复制代码 代码如下:

<scripttypescripttype="text/javascript">
functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.title="thisisanewdiv.";
createDiv.id="newDivId";
createDiv.class="newDivClass";
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);
}
</script>

<scripttypescripttype="text/javascript">
functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.title="thisisanewdiv.";
createDiv.id="newDivId";
createDiv.class="newDivClass";
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);
<!--Directly use 2 CSS class styles-->
createDiv.className = "name file_col";
}
</script>

3.创建div的样式:

Javascript代码
复制代码 代码如下:

<scripttypescripttype="text/javascript">

functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.style.background="pink";
createDiv.style.border="1pxsolidred";
createDiv.style.width="50px";
createDiv.style.height="50px";
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);
}
</script>
标签:[!--infotagslink--]

您可能感兴趣的文章: