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

前端技术 2023/09/01 JavaScript
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>

本文地址：https://www.stayed.cn/item/2877

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案