什么是 @rangy/util？
@rangy/util 是一个由 rangy 团队开发的 npm 包，提供了一系列的工具方法，可以帮助前端开发者更加便捷地操作 DOM 元素。
如何安装？
你可以在终端中使用 npm 命令进行安装：
npm install @rangy/util
如何使用？
安装完成后，你可以在代码中导入这个包：
import util from '@rangy/util';
然后，你就可以使用这些工具方法了。
工具方法列表
接下来，我们来了解一下这个包提供的工具方法。
getComputedStyle
getComputedStyle 方法用于获取指定元素计算后的样式值。
let el = document.getElementById('my-el');
let styles = util.getComputedStyle(el);addClass
addClass 方法用于给指定元素添加一个或多个类名。
let el = document.getElementById('my-el');
util.addClass(el, 'my-class');removeClass
removeClass 方法用于从指定元素中删除一个或多个类名。
let el = document.getElementById('my-el');
util.removeClass(el, 'my-class');toggleClass
toggleClass 方法用于在指定元素中切换一个类名。
let el = document.getElementById('my-el');
util.toggleClass(el, 'my-class');createRange
createRange 方法用于创建一个新的 Range 对象。
let range = util.createRange();
getSelection
getSelection 方法用于获取当前页面中的选区对象。
let selection = util.getSelection();
isSelectionCollapsed
isSelectionCollapsed 方法用于判断当前选区是否是折叠状态（即没有选中任何文本）。
let selection = util.getSelection(); let isCollapsed = util.isSelectionCollapsed(selection);
getSelectionRange
getSelectionRange 方法用于获取当前选区中的 Range 对象。
let selection = util.getSelection(); let range = util.getSelectionRange(selection);
getSelectionText
getSelectionText 方法用于获取当前选区中选中的文本内容。
let selection = util.getSelection(); let text = util.getSelectionText(selection);
示例代码
下面的代码演示了如何使用这个包提供的工具方法：
-- -------------------- ---- ------- ------ ---- ---- -------------- -- ------------- --- -- - --------------------------------- --- ------ - -------------------------- -- ----------- ----------------- ------------ -- ------------ -------------------- ------------ -- ------------ -------------------- ------------ -- ------ ----- -- --- ----- - ------------------- -- ------------ --- --------- - -------------------- -- ------------- --- ----------- - ------------------------------------- -- -------- ----- -- --- ----- - ---------------------------------- -- -------------- --- ---- - ---------------------------------
总结
@rangy/util 提供了一系列方便实用的工具方法，可以帮助前端开发者更加高效地操作 DOM 元素。在实际项目中，我们可以根据需要使用这些工具方法，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672643660cf7123b36486