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>



SyntaxHighlighter.highlight();