如何获取文本节点外层的样式？

Question

<div class="test" contenteditable="true"></div>
<script>
        let editor = document.getElementsByClassName('test')[0];
        let text = '<span style="color: red">今天天气好晴朗</span>';
        editor.innerHTML = text;
</script>

想要实现的功能是，如果选中了某些文字，可以获取到选中文字的样式，在例子中就是获取到“好晴朗”的 color 样式。

我试了 selection 相关的 api，通过 document.getSelection().getRangeAt(0).cloneContents() 只能获取到一个 document fragment，获取不到样式，求问该怎么办，谢谢！

Answer 1

let range = document.getSelection().getRangeAt(0);
let commonAncestorContainer = range.commonAncestorContainer;

// 如果是文本节点，则获取它的父级元素
if(commonAncestorContainer.nodeType===3){
  commonAncestorContainer = commonAncestorContainer.parentElement
}

// 获取整体节点的样式
console.log(window.getComputedStyle(commonAncestorContainer).color)

// 获取富文本节点的样式
commonAncestorContainer.children.forEach(child=>{
  console.log(window.getComputedStyle(child).color)
})

当然，你要自己判断富文本部分节点是否被你的range包裹了，比如简单点用selection.containsNode去判断

Answer 2

你要查找节点的话不应该用 .cloneContents() 吧，直接用 range.startContainer 就可以了吧。