文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

首页 > web前端 > js教程 > 正文

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

怪我咯

发布： 2017-07-07 14:56:22

原创

3005人浏览过

这篇文章主要介绍了js实现按钮加背景图片常用方法,罗列了js事件触发控制背景图片、css样式控制以及图片按钮三种方法,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现按钮加背景图片常用方法。分享给大家供大家参考。具体实现方法如下：

方法一:

代码如下:

<input type="submit" onMouseOver="style=background:url('imgs/jb51.gif')"/>

登录后复制

方法二:

代码如下:

<input type="button" value="提交" style="background:url(图片地址) no-repeat;border:none;text-indent:-2000px;width:100px;height:30px;">

登录后复制

方法三:
就是用图片按钮，即：

代码如下:

<input name="submit" type="image" value=" " src="jb51.jpg" />

登录后复制

以上就是js实现按钮加背景图片常用方法汇总的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载

来源：php中文网

上一篇：javascript实现无法关闭的弹框示例代码下一篇：JS队列函数和异步执行示例详解

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

php 怎么使用Mysql事务实例代码

2023-03-14 12:12:02
php 静态成员变量是什么？

2023-03-14 12:10:02
php 中字符串翻转的方法实例代码

2023-03-14 12:08:01
php+mysql如何实现条件查询？（代码实例）

2023-03-14 12:06:01
php 的拦截器实例代码分析

2023-03-14 12:04:01
php 错误级别设置方法

2023-03-14 12:02:01
PHP 反射(Reflection)用法示例代码

2023-03-14 12:00:01
php 的反射机制是什么？

2023-03-14 11:58:02
php 实现的简单分页类代码示例用法

2023-03-14 11:56:01
一款万能的php分页类实例代码

2023-03-14 11:54:01

2025-06-17 21:06:02

793

js如何检测网络连接状态判断网络质量的4种检测方法！ JS检测网络连接状态和质量的核心方法包括：1.使用navigator.onLine判断是否在线，但其准确性有限；2.通过请求小图片或API接口判断网络是否连通；3.使用fetchAPI发起请求并判断响应状态；4.通过测量响应时间评估网络质量。具体而言，navigator.onLine仅能作为辅助手段，实际更推荐通过Image对象或fetchAPI发起网络请求，若请求成功则说明网络连通，否则可能断开；同时，可记录请求开始和结束时间计算响应时间，从而评估网络质量，响应时间越短质量越高；此外，虽然浏览

2025-06-17 20:15:02

300

js如何实现多语言切换前端国际化i18n解决方案实现前端多语言切换的核心在于根据用户语言偏好动态加载对应语言包并替换页面内容。具体步骤如下：1.通过URL参数、Cookie或浏览器语言确定用户首选语言，优先级为URL参数＞Cookie＞浏览器语言；2.将不同语言文本存储在独立JSON文件中，并通过fetch或import方式异步加载；3.使用DOM操作、模板引擎或框架指令（如Vue自定义指令）替换页面文本；4.提供语言切换界面，在用户选择后更新Cookie或URL参数并重新加载语言包；5.对于动态加载内容，可通过MutationObserve

2025-06-17 20:00:02

461

js如何检测硬盘空间浏览器存储空间检测方法现代JavaScript无法直接检测硬盘空间，但可通过navigator.storageAPI检测浏览器存储配额。1.使用navigator.storage.estimate()获取usage（已用）和quota（配额）值；2.通过persist()请求持久化存储以避免数据被清除；3.通过persisted()检查是否启用持久化。该机制出于安全限制，并非反映真实硬盘容量。若需应对存储不足，可清理缓存、使用IndexedDB或优化数据存储策略。quota值受用户硬盘、浏览器配置等因素动态影响，且仅

2025-06-17 19:00:02

809

JS如何实现元素呼吸效果 3种CSS动画打造呼吸式特效 CSS实现元素呼吸效果有3种方法：1.使用Scale动画，通过transform:scale()实现缩放；2.结合Opacity动画，在缩放的同时改变透明度；3.用多关键帧控制更复杂的效果。调整速度可修改animation时间值，增大scale数值提升幅度。多数情况下CSS动画性能良好，但大量复杂动画可能影响流畅度，需用工具监测优化。此外也可用JavaScript或UI库实现，但CSS更简洁高效。

2025-06-17 17:51:02

818

js中多个异步条件怎么顺序判断在JavaScript中处理多个异步条件顺序判断的最佳方式是使用Promise链或async/await。1.Promise链通过.then()依次执行每个异步条件，并可在每个步骤中进行判断和短路操作，但代码较长且容易嵌套过深；2.async/await则以更直观、同步化的方式编写异步逻辑，提升可读性和维护性；3.为避免Promise链过长，可拆分逻辑为独立函数、使用async/await、良好命名及借助工具库优化；4.错误处理可通过.catch()统一捕获或在async函数中使用try/cat

2025-06-17 17:18:02

739

JS怎样生成组织结构图 4种布局算法可视化树形数据结构生成组织结构图的核心在于将层级数据转换为DOM并应用布局算法。首先，使用JSON表示组织层级，接着通过递归函数将其转为DOM结构，最后选择合适的布局算法进行可视化。常见的布局算法包括：1.TidyTree适合清晰层级；2.ClusterDendrogram用于聚类展示；3.RadialTree适用于大型结构；4.Force-DirectedGraph适合复杂关系。用D3.js实现TidyTree需定义布局、创建SVG并绘制节点与连线。交互方面，通过点击事件切换子节点的显示状态并重新渲染图表以实现

2025-06-17 16:57:01

972

js如何实现拖放排序元素拖拽排序与位置交换实现拖放排序可通过JS实现，核心在于监听dragstart、dragover、drop事件并交换元素位置。首先HTML结构需设置可拖动的列表元素，每个li添加draggable="true"；其次CSS添加可拖动样式提示；接着JS逻辑通过监听事件控制拖动流程，并利用getDragAfterElement函数计算插入位置；最后优化体验可通过视觉反馈、性能优化和移动端适配实现，常见应用于任务管理、电商网站和后台管理系统。

2025-06-17 16:54:02

444

js如何获取DOM元素 DOM元素获取的5种常用方法获取DOM元素的方法有五种，分别是document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()、document.querySelector()和document.querySelectorAll()。1.document.getElementById()通过id获取单个元素，但id必须唯一；2.document.getElementsByClassName()通过class

2025-06-17 15:57:01

926

js如何检测打印机网页打印状态检测方法汇总检测JavaScript中打印机状态没有直接通用API，但可通过曲线策略实现。1.window.print()事件监听只能确认对话框关闭，无法区分成功打印或取消；2.matchMedia查询可检测进入或离开打印预览状态，但无法确认实际打印行为；3.后端配合通过发送打印任务并轮询或WebSocket查询状态，相对可靠但需额外开发成本；4.第三方库基于上述方法封装，可靠性取决于具体实现。此外，避免内容丢失应使用@mediaprint优化样式、避免绝对定位、控制分页并进行打印预览测试。JavaScri

2025-06-17 12:15:01

933