编辑，来源

Question

我正在尝试将图像添加到我使用Javascript的按钮，但我似乎无法让它工作。我使用HTML5成功添加了图片，但是，根据我的需要，我需要通过javascript添加图片。

以下是我通过HTML添加图片的方法。

<button class="button" id="Ok"><img src="images/ok.png"></button>

以下是我尝试通过Javascript添加图片的内容，但它似乎无法正常工作。

var buttons = document.getElementsByClassName("button");
for (var b = 0; b < buttons.length; b++) {
      buttons[b].src = "images\ok.png";   
  }

我不确定我做错了什么，任何帮助都会很好。感谢。

Answer 1

我不知道这是否是你需要的......

<button id="button"></button>

<script type="text/javascript">
    var buttons = document.getElementById("button");
    buttons.innerHTML = '<img src="images\ok.png" />';
</script>

Answer 2

我会将按钮变成块元素并给它一个背景图像。

HTML：

<button class="button" id="Ok"></button>

CSS：

.button{
display:inline-block;
background:none;
width: 50px;
height: 20px;
}
.button.okay{
background:url('images/ok.png');
}

JS：

var buttons = document.getElementsByClassName("button");
for (var b = 0; b < buttons.length; b++) {
 buttons[b].classList.add("okay");
  }

Answer 3

试试这个：

buttons[b].firstChild.src= "images\ok.png";

Answer 4

我认为你缺少select标签，你只为button元素设置了src内容。你能试试这个

吗？

for (var b = 0; b < buttons.length; b++) {
   buttons[b].getElementsByTagName("img").src = "images\ok.png";   
}

Answer 5

我认为这可能是你正在寻找的......这将按钮直接设置为背景图像。但是，您必须将width和height选项设置为图片的宽度和高度，否则它将被剪切或有空格，具体取决于按钮和图像的大小。

<style>
  button.button#ok
  {
    width:100px;
    height:100px;
  }
</style>
<button class="button" id="ok"></button>
<script>
  var buttons=document.getElementsByClassName("button");
  for(var b=0;b<buttons.length;b++)
  {
    if(buttons[b].id=="ok")
    {
      buttons[b].style.background="url('images/ok.png')";   
    }
  }
</script>

编辑，来源

以下是行动中的代码：

http://js.x10.bz/helpstack/35742199/button.html

以下是代码的来源（尽管如此）：

http://js.x10.bz/helpstack/35742199/button.txt

这是我使用的图像：

http://js.x10.bz/helpstack/35742199/cookies.jpg

Answer 6

**TRY THIS**

<!DOCTYPE html>
<html lang="en"><head>
</head><body>
  <button class="button" id="Ok"></button>
<script>
var buttons = document.getElementsByClassName("button");
for (var b = 0; b < buttons.length; b++) {
      buttons[b].innerHTML = "<img src=\"ok/png\"/>";   
  }
</script>
</body></html>

如何通过Javascript将图像添加到按钮？

6 个答案:

编辑，来源