当前位置：首页 > 资讯 > 技术文档

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

时间：2022-08-22 10:37 编辑：来源：阅读：
扫一扫，手机访问

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

[b]1.创建div元素：[/b] 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>

[b]2.创建div的属性：[/b] Javascript代码

[u]复制代码[/u] 代码如下:

<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>

[b]3.创建div的样式：[/b] Javascript代码

[u]复制代码[/u] 代码如下:

<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>

全部评论(0)

上一篇：js,jq,css多方面实现简易下拉菜单功能
下一篇：JavaScript开发人员的10个关键习惯小结

资讯排行榜
更多>>