奇怪的按钮增加了

最近在写关于 Markdown 的油猴脚本,需要做一个“复制 Markdown 链接”按钮。由于对任何 DOM 元素使用addEventListener方法都可以做成按钮,所以元素本身的标签并不一定非要是 button。于是我先后做了三版按钮:

button 文字按钮

最容易的按钮就是文字按钮,只需要一对<button>标签就可以实现。实现效果如下:

<button>复制Markdown链接</button>

用 draw.io 绘制的 svg 矢量图按钮

由于文字在网页缩放时可能出现文字换行的情况导致按钮变形,所以需要一个更稳定的按钮。于是我使用 draw.io 绘制了 Markdown 图标,效果如下:


svg 图片

svg 标签可以直接嵌入 html 页面中。

使用 base64 的 img 图片按钮

由于 svg 图片并不是很符合预期,所以我又用一张已有的图片放入 base64 转换器中转换。使用图片如下:

用于 base64 的 jpg 图片

将该图片使用 base64 转换后会得到一串以 data:image/jpeg;base64,开头的链接,这串链接可以直接作为 img 标签的 src 属性。这一版按钮是我最终使用的按钮。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容