Rangy：如何实现多重风格？答案

【问题标题】：Rangy : how to implement Multiple style?Rangy：如何实现多重风格？
【发布时间】：2021-12-13 22:22:20
【问题描述】：

我使用Rangy 在我的网页中突出显示文本。有没有办法设置多种样式供用户选择突出显示文本？例如，当用户单击一些黄色突出显示时，我使用 getHighlightForElement() 方法获取所有文本，但我不知道如何更改颜色类/ID？或任何其他方式的建议？谢谢！

【问题讨论】：

@timdown 这样如果 timdown 经常出现在 SO 上（？）他会看到这个

标签： javascript rangy

【解决方案1】：

下面的代码是一个简单的样式表交换器。当您单击“Highlight 1”按钮时，它将加载一个名为“highlight1.css”的样式表。当您单击其他按钮时，样式表将被换出。

<html lang="en">
  <head>
    <link href="default_highlight.css" rel="stylesheet" type="text/css" id="highlight">
    <script>
      function setHighlight1() {
        const highlight = document.getElementById('highlight');
        highlight.href = 'highlight1';
      }
      function setHighlight2() {
        const highlight = document.getElementById('highlight');
        highlight.href = 'highlight2';
      }
      function setHighlight3() {
        const highlight = document.getElementById('highlight');
        highlight.href = 'highlight_3.css';
      }
    </script>
  </head>
  <body>
    <button onclick="setHighlight1()">Highlight 1</button>
    <button onclick="setHighlight2()">Highlight 2</button>
    <button onclick="setHighlight3()">Highlight 3</button>
  </body>
</html>

希望这能回答你的问题。

【讨论】：

谢谢，但在一页中有 3 个不同的黄色突出显示。用户单击其中一个并打开一个弹出窗口，然后他想更改样式...这是我的问题...
没关系。该代码更改了实际加载的样式表。如果用户想要更改样式，他们只需单击按钮（如我的示例中所示）。按钮可以添加到该弹出窗口中。
很抱歉，但有时在一个突出显示的文本中有多个跨度，只有我们可以通过上述方法检索它们。我们不能简单地改变风格。请看看 Rangy。