js实现按钮加背景图片常用方法

本文实例讲述了js实现按钮加背景图片常用方法。分享给大家供大家参考。具体实现方法如下： 方法一: 代码如下:&lt;input type=”submit” onMouseOver=”style=background:url(‘imgs/jb51.gif’)”/&gt;   方法二: 代码如下:&lt;input type=”button” value=”提交” style=”background:url(图片地址) no-repeat;border:none;text-indent:-2000px;width:100px;height:30px;”&gt;   方法三: 就是用图片按钮，即： 代码如下:&lt;inp 在网页设计中，按钮是用户交互的重要元素，而为按钮添加背景图片可以使其更加美观、个性化，提升用户体验。本文将详细介绍三种使用JavaScript实现按钮添加背景图片的方法。 **方法一：利用onMouseOver事件改变样式** 这种方法是通过JavaScript的事件处理来实现的。`onMouseOver` 是一个鼠标移入事件，当鼠标指针移动到按钮上时，会触发该事件。在HTML中，我们可以在`<input>`标签内设置`onMouseOver`属性，让它在触发时修改按钮的样式，添加背景图片。例如： ```html <input type="submit" onMouseOver="style.background='url(imgs/jb51.gif)'"> ``` 这段代码会在鼠标移入按钮时，将按钮的背景设置为`imgs/jb51.gif`路径下的图片。但是，这种方式的缺点是仅在鼠标悬停时显示背景图片，鼠标移开后图片会消失。 **方法二：使用内联样式设置背景图片** 这种方法是在`<input>`标签的`style`属性中直接定义背景图片。这种方式可以持久地设置按钮的背景，不仅限于鼠标悬停状态。代码示例如下： ```html <input type="button" value="提交" style="background: url(图片地址) no-repeat; border: none; text-indent: -2000px; width: 100px; height: 30px;"> ``` 这里，`background`属性设定了图片的URL，`no-repeat`表示图片不重复填充，`border: none`移除了边框，`text-indent`将文字向左缩进，避免与图片重叠，同时设置了按钮的宽度和高度。 **方法三：使用图片作为输入按钮** 这种方法是直接使用`<input type="image">`标签，将图片作为按钮。这种方式适用于按钮本身就是图片的情况。代码如下： ```html <input name="submit" type="image" value=" " src="jb51.jpg"> ``` 这样，按钮的外观就是`jb51.jpg`图片，点击图片的任何位置都会触发提交操作。 总结来说，以上三种方法都可以实现JavaScript在按钮上添加背景图片的功能。选择哪种方法取决于实际需求，如需动态改变背景或者鼠标悬停效果，可使用方法一；若需要持久的背景图片展示，方法二更为合适；如果按钮本身就是一张图片，那么方法三则是最佳选择。在实际应用中，开发者应根据项目需求和优化考虑，灵活选择并组合使用这些技术。