怎么分别改变用JS创建出来的元素的样式?

<!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存在的情况下,按钮的功能不冲突。

这个应该怎么写?
或者说思路是怎么样的?


牛魔王的故事
浏览 592回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript