JavaScript动态创建div并添加样式

快乐打工仔 分类:实例代码

JavaScript动态创建div并添加样式属于前端实例代码,有关更多实例代码大家可以查看

在实际应用中,往往需要动态的创建一个div,并给其添加指定的文本或者样式。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script>
var odiv=document.createElement("div");
odiv.id="thediv";
odiv.style.width="100px";
odiv.style.height="100px";
odiv.style.backgroundColor="red";
window.onload=function(){
  document.body.appendChild(odiv);
}
</script>
</head>
<body>
</body>
</html>

以上代码可以动态创建一个div,并且设置它的尺寸和背景色,然后添加到body中。

相关阅读:

(1).document.createElement参阅document.createElement()一章节。

(2).appendChild参阅JavaScript appendChild()一章节。

JavaScript动态创建div并添加样式,这样的场景在实际项目中还是用的比较多的,关于JavaScript动态创建div并添加样式就介绍到这了。

回复

我来回复
  • 暂无回复内容