0

我在 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%';

我的图像/Resources/Icons/appbar.next.rest.png位于我项目的目录中。有人可以为我指出如何正确使用按钮图像的正确方向吗？我是 javascript 新手，因此我们将不胜感激任何链接、代码或说明！

4

3 回答 3

1 
Use input type="image", or use a button element with an <img> child.

例如：

    <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>
于 2012-04-13T03:59:40.073 回答
0

要将图像添加到按钮，您可以将输入类型从按钮更改为图像：

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

你可以修改它。

http://jsfiddle.net/6HdnU/

于 2012-04-13T04:01:38.217 回答
-1

基于此页面，如果您input type="image"打算type="image"对按钮执行任何操作（在服务器上或在 javascript.

基本上，您应该使用 CSS 的background-image属性，而不是使用按钮的纯 HTML 属性来显示输入。

js匹配你的：

var sb=doc.createElement('input');              
sb.type='button';
sb.class='myImageButton';

和这个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%;
}

应该管用。

可能值得指出的是，如果你没有对这个按钮的价值做任何事情，那么这个答案并不值得你花时间。但你最好确定。

于 2012-04-13T04:16:32.913 回答