CODEWITHSUNDEEP
javascriptrangy
me Ya
me Ya

Reputation: 21

Rangy : how to implement Multiple style?

im using Rangy for highlighting text in my web page. is there a way to set multiple styles for user to choose for highlighting text ? for example when user click on some yellow highlight, i take all of the text with getHighlightForElement() method but i dont know how to change the color class/id ? or any other way suggestion? thank you !

Upvotes: 1

Views: 142

Answers (1)

EthanBlaisAlarms
EthanBlaisAlarms

Reputation: 55

The code below is a simple stylesheet swapper. When you click on the "Highlight 1" button, it will load a stylesheet named "highlight1.css". The stylesheet will be swapped out when you click a different button.

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

Hopefully this answers your question.

Upvotes: 0

Related Questions