javascript 在javascript中将图像添加到按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10135023/
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
add image to button in javascript
提问by Matthew
I have created a button in javascript and I would like to use an image for the button instead of text, but I have not yet found a way to do this. So far the sources I have referenced are not working for me for some reason. What I have so far is as follows
我在 javascript 中创建了一个按钮，我想为按钮使用图像而不是文本，但我还没有找到一种方法来做到这一点。到目前为止，由于某种原因，我引用的来源对我不起作用。到目前为止我所拥有的如下
Javascript
Javascript
var sb=doc.createElement('input');
sb.type='button';
//sb.value='Find';
sb.src = "url(/Resources/Icons/appbar.next.rest.png)";
sb.style.height='100%';
//sb.style.width='20%';
where my image is locoated in the directory /Resources/Icons/appbar.next.rest.pngin my project. Can someone point me in the right direction as to how to properly use an image for a button? I am new to javascript so any links, code, or directions would be greatly appreciated!
我的图像/Resources/Icons/appbar.next.rest.png位于项目目录中的位置。有人可以指出我如何正确使用按钮图像的正确方向吗？我是 javascript 新手，所以任何链接、代码或方向将不胜感激！
回答by kennebec
Use input type="image", or use a button element with an <img> child.
for example:
例如：
<input type="image" src="art/clips/eightbll.gif"
name="input_img" width="63" height="64">
or
<button type="button" id="input_img">
<img src="art/clips/eightbll.gif"
alt="Image input control" width="63" height="64">
</button>
回答by undefined
for adding image to button you can change type of input from button to image:
要将图像添加到按钮，您可以将输入类型从按钮更改为图像：
var body = document.getElementsByTagName("body")[0];
var s = document.createElement("input");
s.src = "http://www.gravatar.com/avatar/a4d1ef03af32c9db6ee014c3eb11bdf6?s=32&d=identicon&r=PG";
s.type = "image";
body.appendChild(s);
you can modify it.
你可以修改它。
回答by quodlibetor
Based on this pagewhich recommends against input type="image"it seems like using a type="image"could be problem if you're planning on doing anything with the button (on the server orin javascript.
根据这个建议反对input type="image"它的页面，type="image"如果您打算对按钮（在服务器上或在 javascript.
Basically, instead of using the pure-html properties of the buttons to show the input, you should use CSS's background-imageproperty.
基本上，您应该使用 CSS 的background-image属性而不是使用按钮的纯 html 属性来显示输入。
js matching yours:
js匹配你的：
var sb=doc.createElement('input');
sb.type='button';
sb.class='myImageButton';
and with this css:
并使用此 css：
input.myImageButton {
border: none;
cursor: pointer;
display: inline-block;
text-indent: -3000px;
background: url(/Resources/Icons/appbar.next.rest.png) no-repeat 50% 50%;
/* width: 20%; */
height: 100%;
}
should work.
应该管用。
It's probably worth pointing out that if you're not doing anythingwith the value of this button then this answer isn't really worth your time. But you had better be sure.
可能值得指出的是，如果您没有对这个按钮的价值做任何事情，那么这个答案真的不值得您花时间。但你最好确定一下。
