<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {height: 150px; width: 150px; border: 1px solid #000; margin: 5px;}
</style>
</head>
<body>
<button>new div</button>
</body>
<script>
var body = document.querySelector("body");
var btn = document.querySelector("button"); // 获取body和按钮
btn.onclick = function(){
div = document.createElement("div");
button1 = document.createElement("button");
button2 = document.createElement("button"); // 创建div和两个按钮
button1.innerHTML = "change With";
button2.innerHTML = "change Height"; // 设置两个按钮的内容
body.appendChild(div);
body.appendChild(button1);
body.appendChild(button2); //把div和两个按钮插入进文档
// code...
// 我想点击按钮改变div相应的样式...
}
</script>
</html>
点击new div的按钮可以创建出来一个div和两个按钮;
我想点击按钮就可以改变相应的div样式。
例:
点击第一组changeWith和changeHeight按钮,就改变第一个div的宽高。
而且同时有多个div存在的情况下,按钮的功能不冲突。
这个应该怎么写?
或者说思路是怎么样的?
相关分类