smart-underline 是一个基于 JavaScript 的 npm 包，用于为网页中的文字添加下划线效果。它不仅可以实现传统的下划线样式，还支持自定义颜色、宽度、动画等特性。
安装和使用
你可以通过 npm 进行安装：
npm install smart-underline
然后在你的 JavaScript 代码中引入并使用它：
-- -------------------- ---- ------- ------ -------------- ---- ------------------ ----- -- - --- ---------------- ------ ---------- ------ ------ ---------- ------- --- ------------------------------------------------------展开代码
以上代码创建了一个 SmartUnderline 实例，并将其应用到 HTML 元素 .my-text 上。这会将这个元素中所有的文本都添加上下划线，并且下划线的颜色为红色、宽度为 2 像素、动画效果为波浪式。
如果你希望只对部分文本添加下划线，可以使用 applyToRange 方法：
su.applyToRange(document.createRange(), 'Hello, world!');
以上代码创建了一个包含文本 "Hello, world!" 的 Range 对象，并将其应用了 SmartUnderline 实例。
自定义样式
SmartUnderline 支持以下自定义属性：
color: 下划线的颜色，默认为黑色。width: 下划线的宽度，默认为 1 像素。animation: 下划线的动画效果，可以为 "none"、"wave" 或 "blink"。默认为 "none"。
你可以通过以下方式修改这些属性：
su.setColor('#00ff00'); su.setWidth('4px'); su.setAnimation('blink');
高级用法
事件监听
SmartUnderline 支持以下事件：
mouseenter: 当鼠标移入下划线时触发。mouseleave: 当鼠标移出下划线时触发。click: 当单击下划线时触发。
你可以使用 on 方法监听这些事件：
-- -------------------- ---- ------- ------------------- --- -- - ------------------ ------- --- ------------ --- --- ------------------- --- -- - ------------------ ---- --- ------------ --- --- -------------- --- -- - -------------------- --- ------------ --- ---展开代码
在事件处理函数中，参数 e 是一个事件对象，包含了当前的下划线元素和其他相关信息。
手动添加和删除下划线
如果你想手动添加或删除下划线，可以使用以下方法：
const underline = su.createUnderline(); // 创建一个下划线元素 document.body.appendChild(underline); // 将它添加到页面上 su.removeUnderline(underline); // 从页面上删除它
createUnderline 方法会创建一个新的下划线元素，并将其与当前实例关联起来。removeUnderline 方法则会从页面上删除一个下划线元素，并将其与实例解除关联。
示例代码
以下示例展示了如何使用 SmartUnderline 来添加动态效果的下划线：
-- -------------------- ---- ------- --------- ----- ------ ------ --------------------- --------------- ------- -------------- ------ -------------- ---- ----------------------- ----- -- - --- ---------------- ------ ---------- ------ ------ ---------- ------- --- ----- ---- - ----------------------------------- ----- ----- - ----------------------- ------------------------------- --- ----------------------------- ---- ----------------------- ------------------- --- -- - -------------------- - ---------- --- ------------------- --- -- - -------------------- - --- --- --------- ------- -------- - ---------- ----- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
