巧妙获取选中文本外层元素样式
本文介绍如何高效获取选中文本的父级元素样式信息。方法如下：
-
获取文本选择范围: 使用
document.getSelection().getRangeAt(0)获取当前选中文本的范围对象。 -
找到共同祖先元素: 通过
range.commonAncestorContainer属性获取选中文本的共同祖先节点。如果该节点是文本节点（nodeType === 3），则将其父元素作为目标元素。 -
获取元素样式: 使用
window.getComputedStyle(commonAncestorContainer)获取目标元素的计算样式，例如颜色信息：console.log(window.getComputedStyle(commonAncestorContainer).color)。 -
处理富文本情况: 对于富文本内容，需要遍历目标元素的子节点，分别获取每个子节点的计算样式。示例代码如下：
commonAncestorContainer.children.forEach(child => { console.log(window.getComputedStyle(child).color); });
通过以上步骤，即可轻松获取选中文本外层元素的样式信息。
