javascript生成div标签并设置class和style

整体代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box {
     
				border: 1px solid #f2f2f2;
				width: 100px;
				height: 100px;
				margin-left: 15px;
				margin-top: 15px;
			}
			
			.name {
     
				text-align: center;
				margin-top: 40%;
				color: white;
			}
		</style>
	</head>

	<body>
		<div id="content"></div>
	</body>
	<script>
		var div = document.createElement("div"); //创建一个标签
		div.className = "box"; //给创建的div设置class;
		var con = document.getElementById('content'); //获取标签
		con.appendChild(div); //向刚获取的标签中添加创建的标签
		var child = document.createElement("div"); //创建一个标签
		child.className = "name"; //给创建的div设置class;
		div.appendChild(child);
		var color = document.getElementsByClassName('name')[0];
		color.innerHTML = '元素';
		div.style.backgroundColor = "#00FF7F";
	</script>

</html>

你可能感兴趣的:(javascript,html,css)