如何通过 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";   
  }

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

Answer 1

我会将按钮变成块元素并为其提供背景图像。

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 2

试试这个：

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

Answer 3

我认为您缺少 select 标记，您只为按钮元素设置了 src 内容。你能试试这个吗

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

Answer 4

我想这可能就是您要找的....这会将按钮直接背景设置为图像。但是您必须为图像的宽度和高度设置 width 和 height 选项，否则图像将被截断或显示为白色 space，具体取决于按钮和图像的大小。

<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 5

**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>

Answer 6

不知道是不是你需要的..

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

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

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

How to add image to button via Javascript?

html

javascript

resources

image

getelementsbyclassname

编辑，来源