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

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";
  }

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

原文由 Henry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不知道这个是不是你需要的。。

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

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

原文由 MGB C 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我认为这可能是您正在寻找的….这会将按钮直接背景设置为图像。但是您必须为您的图像宽度和高度设置 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

原文由 James Karlton Stone 发布，翻译遵循 CC BY-SA 3.0 许可协议