I have a static html file containing mostly text. Lots of text snippets are highlighted using the <mark> tag. I would like to add a button that toggles the text weight of the marked text snippets between bold and normal. The intended effect is to switch on / off the highlighting.
Is there any magic way to do it by directly changing the style of the mark css class?
Example:
... This is an <mark>important text snippet</mark> ...mark { text-weight: bold; }mark { text-weight: normal; }The reason why I want to do this is to allow the user to decide, if he wants to see highlighted text or not. I know I can change the style of each marked text snippet, but I am wondering, if there is a more direct way.
A more direct way would be to add a class to a parent element. Then, in CSS, you can select all of the child mark elements. This method saves you from iterating over every mark element on your page in JS. You could add this class on a containing div or even on the root html element if you desire.
classList.toggle is supported on all major browsers: https://caniuse.com/?search=classlist.toggle
function toggleMarkup() {
document.querySelector("#content").classList.toggle("markup-shown");
}p.markup-shown mark {
font-weight: bold;
}<p id="content">
Hello! This is some <mark>marked up</mark> text! And this is some more <mark>marked</mark> text.
</p>
<button onclick="toggleMarkup()">
Click me to toggle markup.
</button>https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model https://stackoverflow.com/a/55468693/9627251
You can also obtain and modify existing CSS classes directly from JS:
const rules = document.styleSheets.map(sheet => sheet.cssRules);
const rule = rules.find(r => r.selectorText == 'mark');
rule.style.fontWeight = 'bold'; // or normal, in your toggle function logic
Note that you would already have to have a CSS rule like:
mark { font-weight: normal; }
Query all your mark elements, then toggle a highlight class to affect their font-weight styling. Get the parents of the mark elements using '.closest()', and add a button to each parent element.
const marks = document.querySelectorAll('mark')
// use event target to get the parent element and subsequent
// mark element and toggle a class of normal font weight
function toggleHighlight(e) {
e.target.closest('li').querySelectorAll('mark').forEach( el => {
el.classList.toggle('normal')
})
}
marks.forEach(mark => {
// create the button
const button = document.createElement('button')
// add text for the button
button.textContent = 'Toggle Highlight'
// get the parent element your mark is living within and append the button to it
// make sure it only gets one button in case there are more than one mark element
!mark.parentNode.innerHTML.includes('button') ? mark.parentNode.appendChild(button) : null
// event listener for when the button is pressed
button.addEventListener('click', toggleHighlight)
})mark {
font-weight: bold;
}
.normal {
font-weight: normal;
}
li {
clear: left;
}
button {
float: right;
}<ul>
<li>This is not important text</li><hr>
<li><mark>This text here important text.</mark> But this is not. <mark>We have more important text here as well.</mark> Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Ac turpis egestas integer eget. </li><hr>
<li>This is text not important text. <mark>But this is</mark></li><hr>
<li><mark>This text here important text.</mark> But this is not</li><hr>
</ul>What about something like this?
<html>
<head>
<style>
mark {
font-weight: bold;
background: none;
}
</style>
</head>
<body>
This is an <mark>important text snippet</mark> and so <mark>is this</mark>.
<button onclick = "changeMark()">Change Mark Style</button>
<script>
function changeMark() {
document.querySelectorAll("mark").forEach(e => e.style.fontWeight = "normal");
}
</script>
</body>
</html>