最近在写关于 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 属性。这一版按钮是我最终使用的按钮。
网友评论