在 JavaScript 中将图像添加到按钮
add image to button in 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的新手,所以任何链接,代码或方向将不胜感激!
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>
要将图像添加到按钮,您可以将输入类型从按钮更改为图像:
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/
基于此页面,该页面建议不要input type="image"
如果您打算使用按钮(在服务器上或在javascript中)做任何事情,似乎使用type="image"
可能会有问题。
基本上,您应该使用 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%;
}
应该工作。
可能值得指出的是,如果您没有对此按钮的值做任何事情,那么这个答案就不值得您花时间。但你最好确定。
相关文章:
- 在HTML5画布上添加按钮和控件
- 无法在图像周围添加按钮
- Sitecore富文本编辑器-添加按钮
- 如何在标记href中添加按钮
- jqgridnavgrid在搜索按钮和自定义按钮之后添加按钮
- 如何在视频标签中添加按钮覆盖
- 添加按钮以切换浏览器
- 如何在php中添加按钮而不是错误状态和成功消息
- Struts2jquery可编辑网格,要禁用内联添加按钮
- 如何在服务器端的文本中添加按钮单击事件
- 简单的dart网页应用程序在IE上添加按钮的速度非常慢
- 向HTML页面添加按钮,更新表格信息
- (PHP&JavaScript)a href添加按钮赢得'我不适用于Mozilla,但适用于IE和谷歌
- 单击添加按钮后如何显示答案按钮
- 如何在 extjs 5 中的工具提示中添加按钮
- 在数据表的新行中添加按钮,变得未定义
- 如何向照片滑动添加按钮
- 动态添加按钮后刷新 jQm 标头
- PHP,MySql和JQuery - 按添加按钮后填充选择框
- 动态添加按钮,这些按钮也会动态添加文本框 AngularJS