管理资源吧首页>>>教程>>>编程>>>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>

教程首页 更多教程