Question

我用JavaScript动态创建按钮;我希望每个按钮都有自己的背景图像。我怎样才能做到这一点？

我到目前为止的代码是：

ec2-dashboard > Network Interfaces > Description : RDSNetworkInterface >> IPv4 Public

Answer 1

在for循环中尝试button.style.backgroundImage = "url(" + array[i] + ")";。将array替换为您自己的数组变量。

也不要用大写字母开始变量名称和元素ID，例如Area - ＆gt; area。

您可以将var Area = document.getElementById("Area");移出for循环。这不需要被调用10次。

Answer 2

var listofImgUrl = ["https://homepages.cae.wisc.edu/~ece533/images/airplane.png", "https://homepages.cae.wisc.edu/~ece533/images/boat.png",
"https://homepages.cae.wisc.edu/~ece533/images/pool.png",
"https://homepages.cae.wisc.edu/~ece533/images/airplane.png", "https://homepages.cae.wisc.edu/~ece533/images/boat.png",
"https://homepages.cae.wisc.edu/~ece533/images/pool.png",
"https://homepages.cae.wisc.edu/~ece533/images/airplane.png", "https://homepages.cae.wisc.edu/~ece533/images/boat.png",
"https://homepages.cae.wisc.edu/~ece533/images/pool.png",
"https://homepages.cae.wisc.edu/~ece533/images/airplane.png"];

function buttonsCreate() {
  for (var i = 0; i <= 10; ++i) {
    var button = document.createElement("button");
    button.innerHTML = i;
    button.style.background = "url(" + listofImgUrl[i] + ")";
    var Area = document.getElementById("Area");
    Area.appendChild(button);
    button.setAttribute("onClick", "eventHandlerForButtons('" + i + "');");
  }
}

function eventHandlerForButtons(alertText) {
  alert(alertText);
}

<html>

<body>
  <script>
  </script>
  <button onClick="buttonsCreate();">Create Buttons</button>
  <div id="Area"></div>

</body>

</html>

Answer 3

我的拙见，.map（）应该是您想要迭代数组时考虑的第一种方法。这是一个完美的用例：

<html>
<body>
<script>

// array of however many urls you wouls like rendered. 
//This will determin the number of buttons created
const imgArr = ['url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7', 'url8', 'url9', 'url10']

function buttonsCreate() {

    //iterates over each array element and use the element and index
    imgArr.map( (el, i) => {
        const button = document.createElement("button");
        const area = document.getElementById("area");
        button.setAttribute("id", ["btn" + i]);
        button.setAttribute("onClick", "eventHandlerForButtons('"+i+"');");
        button.style.background = el;
        area.appendChild(button);
    });   
}

function eventHandlerForButtons(alertText) {
    alert(alertText);

    //just to allow you to look at area innerHTML by clicking a created button
    console.log(document.getElementById('area').innerHTML);
}
</script>
<button onClick="buttonsCreate();">Create Buttons</button>
<div id="area"></div>

</body>
</html>

Answer 4

button.style.backgroundImage不起作用。这里是数组的代码

<html>
<body>
<script>
 function loadPics()
     {
         for (i = 0; i <= 10; i++)
          {
          imgArray[i] = new Image();
          imgArray[i].src = 'ImageVerkehr/verk' + (i) + '.jpg';
         }
      }


 function buttonsCreate() {

 loadPics();
    for (var i = 0; i <= 10; ++i) {
        var button = document.createElement("button");
        var area = document.getElementById("area");
         button.style.backgroundImage = "url(" + imgArray[i] + ")";
        area.appendChild(button);
        button.setAttribute("onClick", "eventHandlerForButtons('"+i+"');");
    }
}

function eventHandlerForButtons(alertText) {
    alert(alertText);
}
</script>
<button onClick="buttonsCreate();">Create Buttons</button>
<div id="area"></div>

</body>
</html>

使用动态背景图像创建按钮

4 个答案: