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