How to add image to button via Javascript?

2019-03-22 07:52发布

站内问答 / JavaScript
426 6 6

I am trying to add image to buttons I have using Javascript but I can't seem to get it working. I have sucessfully added image using HTML5, however, for my needs I need to add the image via javascript.

Below is what I have written to add images via HTML.

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

Below is what I have tried to add image via Javascript but it doesn't seem to work.

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

I am not to sure what I am doing wrong, any help would be nice. Thanks.

6条回答
我只想做你的唯一
2楼-- · 2019-03-22 08:20

I don't know if this is what you need..

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

<script type="text/javascript">
    var buttons = document.getElementById("button");
    buttons.innerHTML = '<img src="images\ok.png" />';
</script>
查看更多
0人赞 添加讨论(0) 举报
冷血范
3楼-- · 2019-03-22 08:23 
**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>
查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
4楼-- · 2019-03-22 08:26

Try this:

buttons[b].firstChild.src= "images\ok.png";
查看更多
0人赞 添加讨论(0) 举报
趁早两清
5楼-- · 2019-03-22 08:28

I would turn the button into a block element and give it a background image.

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");
  }
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
6楼-- · 2019-03-22 08:35

I think you missing select tag , you only set src content for button element. Can you try with this

for (var b = 0; b < buttons.length; b++) {
   buttons[b].getElementsByTagName("img").src = "images\ok.png";   
}
查看更多
0人赞 添加讨论(0) 举报
狗以群分
7楼-- · 2019-03-22 08:36

I think this may be what you're looking for.... this will set the buttons direct background as the image. But you must set the width and height options to your images width and height or it will be cut off or have white space, depending on the size of the button and image.

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

Edit, source

Here is the code in action:

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

Here is the source of the code(which is above though):

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

And here is the image i used:

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)