时间戳

首页 > 解决方案 > Rangy：如何实现多重风格？

javascript - Rangy：如何实现多重风格？

问题描述

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

标签： javascriptrangy

解决方案

下面的代码是一个简单的样式表交换器。当您单击“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>

希望这能回答你的问题。

推荐阅读