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

最新推荐文章于 2023-10-03 19:09:16 发布

jianchenn

最新推荐文章于 2023-10-03 19:09:16 发布

阅读量9.4k

点赞数 7

文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/jianchenn/article/details/107322441

版权

整体代码

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