我希望能够选择文本点击按钮，并让文本颜色发生变化，当文本不再被选择后，文本颜色的变化应该持续。
我知道已经有很多解决方案可以做到这一点了，例如 CSS. 然而，我希望能够访问节点，以便在另一个按钮点击，我可以恢复颜色变化。我曾试过研究 window.getSelection() 和 Ranges 和 DocumentFragment但我不明白如何选择DocumentFragment中的节点，修改每个节点，将其插入到文档的正确位置，并创建一个引用，以便我可以在以后的点击中再次将颜色改为黑色。
我还发现了这个 纫 基本上做了我想做的事，但它使用的execCommand已经过时了。
我不想要一个CSS的解决方案，也不想要一个使用jQuery的解决方案。
下面是我正在使用的类似html结构的js代码和codepen。
我有2个按钮，一个是改变选择的颜色，另一个是恢复选择的颜色，即使文本不再被选中。
我使用的是 window.getSelection() 以获得 Selection 的文字。我检查了 Selection 是有效的，然后得到一个带有 getRangeAt(0) 继而呼吁 extractContents().
这就是难点所在，因为。
DocumentFragment 的文件，那么我如何才能重新插入这个 DocumentFragment 的相同位置？DocumentFragment 风格var changeColorButton = document.getElementById('xyz');
var revertColor = document.getElementById('zyx');
const changeSelectionColor = () => {
let selection = window.getSelection()
if (selection) {
let range = selection.getRangeAt(0)
if (range) {
let frag = range.extractContents();
}
/*
2 problems:
1. accessing each node in the DocumentFragment and modifying the style then re-inserting into the correct spot
2. Creating a reference to this fragment for revertColorChange() to use to change the color back to black
*/
}
}
const revertColorChange = () => {
// revert color
}
changeColorButton.addEventListener('click', changeSelectionColor);
最低限度的可复制的例子--------。https:/codepen.ioNoobCodePennerpenGRoKNRd。
<!DOCTYPE html>
<html>
<body>
<button onClick="changeColor()">Change color</button><br/>
<button onClick="changeColorBack()">Change to previous color</button>
<p id="demo">Javascript</p>
<script>
changeColor=()=>{
document.getElementById("demo").style.color ="red"
}
changeColorBack=()=>{
document.getElementById("demo").style.color ="black"
}
</script>
</body>
</html>
这是你要找的吗？