使用 JavaScript 永久更改所選文本的顏色並在 HTML 中恢復

Question

我希望能夠 select 文本單擊按鈕並更改文本顏色 e。 不再選擇文本后，文本顏色更改應保持不變。

我知道已經有很多解決方案可以使用CSS做到這一點。 然而; 我希望能夠訪問節點，以便在單擊另一個按鈕時，我可以恢復顏色更改。 我嘗試查看window.getSelection()和Ranges和DocumentFragment ，但我無法理解如何 select DocumentFragment 中的節點，修改每個節點，將其插入正確的參考 Z4757FE076FD492A8BEEZA6 中的文檔我可以在稍后的單擊中再次將顏色更改回黑色。

我還發現這個線程基本上做了我想做的事情，但它使用了已過時的 execCommand。

我不想要 CSS 解決方案，也不想要使用 jQuery 的解決方案。

下面是我正在使用的具有類似 html 結構的 js 代碼和 codepen。

我有 2 個按鈕，一個用於更改選擇的顏色，一個用於在不再選擇文本后恢復選擇的顏色。

我正在使用window.getSelection()來獲取所選文本的Selection 。 我檢查Selection是否有效，然后使用getRangeAt(0)獲取范圍，然后調用extractContents() 。

這是困難的部分，因為：

它從文檔中提取DocumentFragment ，那么如何將DocumentFragment重新插入到從中提取的 position 中？
我無法弄清楚如何修改DocumentFragment styles 中的節點

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.io/NoobCodePenner/pen/GRoKNRd

Answer 1

<!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>

這是你想要的？

使用 JavaScript 永久更改所選文本的顏色並在 HTML 中恢復

問題描述

1 個解決方案

解決方案1
-2 2020-06-01 10:54:51

使用 JavaScript 永久更改所選文本的顏色並在 HTML 中恢復

問題描述

1 個解決方案

解決方案1 -2 2020-06-01 10:54:51

解決方案1
-2 2020-06-01 10:54:51