Javascript 如何通过Javascript将图像添加到按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35742199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add image to button via Javascript?
提问by Henry
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.
我正在尝试将图像添加到我使用 Javascript 的按钮，但我似乎无法让它工作。我已经使用 HTML5 成功添加了图像，但是，根据我的需要，我需要通过 javascript 添加图像。
Below is what I have written to add images via HTML.
下面是我写的通过 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.
下面是我尝试通过 Javascript 添加图像但它似乎不起作用。
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.
我不确定我做错了什么，任何帮助都会很好。谢谢。
回答by MGB C
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>
回答by James Karlton Stone
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 widthand heightoptions 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.
我认为这可能是你正在寻找的......这会将按钮直接背景设置为图像。但是您必须将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>
Edit, source
编辑，来源
Here is the code in action:
这是正在运行的代码：
http://js.x10.bz/helpstack/35742199/button.html
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
http://js.x10.bz/helpstack/35742199/button.txt
And here is the image i used:
这是我使用的图像：
回答by itamar
I would turn the button into a block element and give it a background image.
我会把按钮变成一个块元素并给它一个背景图像。
HTML:
HTML：
<button class="button" id="Ok"></button>
CSS:
CSS：
.button{
display:inline-block;
background:none;
width: 50px;
height: 20px;
}
.button.okay{
background:url('images/ok.png');
}
JS:
JS：
var buttons = document.getElementsByClassName("button");
for (var b = 0; b < buttons.length; b++) {
buttons[b].classList.add("okay");
}
回答by baj9032
Try this:
尝试这个：
buttons[b].firstChild.src= "images\ok.png";
回答by Binh Tran
I think you missing select tag , you only set src content for button element. Can you try with this
我认为您缺少 select 标签，您只为按钮元素设置了 src 内容。你能试试这个吗
for (var b = 0; b < buttons.length; b++) {
buttons[b].getElementsByTagName("img").src = "images\ok.png";
}
回答by baj9032
**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>
