首页 / 脚本样式 / JavaScript / JavaScript动态创建div属性和样式示例代码

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>