Is there a way to modify the appearance of all clips in an HTML document using JavaScript?

Question

Is there a way to modify the appearance of all clips in an HTML document using JavaScript?

Within my static html file filled with text, numerous snippets are highlighted using the  tag. I am looking to incorporate a button that can toggle the weight of these marked text sections between bold and normal. This would create an effect where the highlighting can be turned on or off.

Is there a special method to achieve this by directly adjusting the style of the mark css class?

For instance:

HTML:

... Here is an <mark>key piece of information</mark> ...

CSS class BEFORE pressing the button: mark { font-weight: bold; }
CSS class AFTER pressing the button: mark { font-weight: normal; }

The purpose behind this feature is to give users the choice of viewing highlighted text or not. While I understand I could manually change the styling for each marked section, I am curious if there is a more direct approach available.

javascript html css

Answer 1

Answer №1

Strategy 1 - Changing the Style of Parent Element

An efficient approach involves adding a class to a parent element. By doing so, you can target all child mark elements using CSS without the need to loop through each mark element in JavaScript. This class can be applied to a wrapping div or even the main html element if desired.

The use of classList.toggle is widely supported across 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>

Strategy 2 - Leveraging CSSOM

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model

You can also access and modify existing CSS classes directly from JavaScript:

const rules = document.styleSheets.map(sheet => sheet.cssRules);
const rule = rules.find(r => r.selectorText == 'mark');
rule.style.fontWeight = 'bold'; // or normal, based on your toggle logic

It's important to note that you would need to have a CSS rule defined beforehand like:

mark { font-weight: normal; }

Answer 2

Strategy 1 - Changing the Style of Parent Element

An efficient approach involves adding a class to a parent element. By doing so, you can target all child mark elements using CSS without the need to loop through each mark element in JavaScript. This class can be applied to a wrapping div or even the main html element if desired.

The use of classList.toggle is widely supported across 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>

Strategy 2 - Leveraging CSSOM

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model

You can also access and modify existing CSS classes directly from JavaScript:

const rules = document.styleSheets.map(sheet => sheet.cssRules);
const rule = rules.find(r => r.selectorText == 'mark');
rule.style.fontWeight = 'bold'; // or normal, based on your toggle logic

It's important to note that you would need to have a CSS rule defined beforehand like:

mark { font-weight: normal; }

Answer 3

Answer №2

Retrieve all mark elements in the document and toggle a highlight class to change their font-weight style. Use '.closest()' to find the parent elements of the mark elements 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, then toggle a class for normal font weight
function toggleHighlight(e) {
  e.target.closest('li').querySelectorAll('mark').forEach(el => {
    el.classList.toggle('normal')
  })
}

marks.forEach(mark => {
  // Create a new button element
  const button = document.createElement('button')
  // Set text content for the button
  button.textContent = 'Toggle Highlight'
  // Find the parent element containing the mark and append the button to it
  // Make sure only one button is added per parent if there are multiple mark elements
  !mark.parentNode.innerHTML.includes('button') ? mark.parentNode.appendChild(button) : null  
  // Add event listener for button click event
  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>

Answer 4

Retrieve all mark elements in the document and toggle a highlight class to change their font-weight style. Use '.closest()' to find the parent elements of the mark elements 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, then toggle a class for normal font weight
function toggleHighlight(e) {
  e.target.closest('li').querySelectorAll('mark').forEach(el => {
    el.classList.toggle('normal')
  })
}

marks.forEach(mark => {
  // Create a new button element
  const button = document.createElement('button')
  // Set text content for the button
  button.textContent = 'Toggle Highlight'
  // Find the parent element containing the mark and append the button to it
  // Make sure only one button is added per parent if there are multiple mark elements
  !mark.parentNode.innerHTML.includes('button') ? mark.parentNode.appendChild(button) : null  
  // Add event listener for button click event
  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>

Answer 5

Answer №3

At times, I implement the following function:

function modifyStyleRule(sheetIndex, selectorText, propertyName, propertyValue) {
    const cssRules = document.styleSheets[sheetIndex].cssRules;
    for (let i = 0; i < cssRules.length; i++) {
        if (cssRules[i].selectorText === selectorText) {
            cssRules[i].style.setProperty(propertyName, propertyValue);
        }
    }
}

You can utilize

modifyStyleRule(sheetIndex, 'mark', 'font-weight', 'bold')

to make text bold, and then

modifyStyleRule(sheetIndex, 'mark', 'font-weight', 'normal')

to revert it back.

(If you only have one stylesheet / style block, simply use sheetIndex=0. Otherwise, you may need to inspect [maybe using

console.log(document.styleSheets);

] to determine which stylesheet contains your mark rule.)

Answer 6

At times, I implement the following function:

function modifyStyleRule(sheetIndex, selectorText, propertyName, propertyValue) {
    const cssRules = document.styleSheets[sheetIndex].cssRules;
    for (let i = 0; i < cssRules.length; i++) {
        if (cssRules[i].selectorText === selectorText) {
            cssRules[i].style.setProperty(propertyName, propertyValue);
        }
    }
}

You can utilize

modifyStyleRule(sheetIndex, 'mark', 'font-weight', 'bold')

to make text bold, and then

modifyStyleRule(sheetIndex, 'mark', 'font-weight', 'normal')

to revert it back.

(If you only have one stylesheet / style block, simply use sheetIndex=0. Otherwise, you may need to inspect [maybe using

console.log(document.styleSheets);

] to determine which stylesheet contains your mark rule.)

Answer 7

Answer №4

Have you considered implementing something like this?

<html>
    <head>
        <style>
            span {
                text-decoration: underline;
                color: red;
            }
        </style>
    </head>
<body>

Here is a <span>highlighted text section</span> and another <span>one</span>.

<button onclick = "changeSpanStyle()">Change Span Style</button>

<script>
    function changeSpanStyle() {
        document.querySelectorAll("span").forEach(e => e.style.textDecoration = "none");
    }
</script>

</body>
</html>

Answer 8

Have you considered implementing something like this?

<html>
    <head>
        <style>
            span {
                text-decoration: underline;
                color: red;
            }
        </style>
    </head>
<body>

Here is a <span>highlighted text section</span> and another <span>one</span>.

<button onclick = "changeSpanStyle()">Change Span Style</button>

<script>
    function changeSpanStyle() {
        document.querySelectorAll("span").forEach(e => e.style.textDecoration = "none");
    }
</script>

</body>
</html>

Is there a way to modify the appearance of all <mark>clips</mark> in an HTML document using JavaScript?

Answer №1

Strategy 1 - Changing the Style of Parent Element

Strategy 2 - Leveraging CSSOM

Answer №2

Answer №3

Answer №4

Similar questions

It appears that the Client Collection in Meteor JS is currently devoid of any data

Is there a way to access the HTML and CSS source code without using the inspect feature

Show the message "Server is now active on port 5000" in the console but unfortunately cannot retrieve it

Refresh the dataTable following the form submission within the colorbox

The JQuery Tooltip fails to function properly following an ajax load operation

How to transfer data using props through the ":to" attribute of a router link in Vue.js

Unable to use OrbitControls with Node 12's ES6 import functionality

What steps are needed to fetch aggregated data from mongodb and present it in ejs?

Is it possible to configure the jQuery datepicker to function without displaying the year?

Node.js server continues running after attempting to stop with ctrl + C following starting the server using the command "npm start"

Ways to embed an HTML file into another HTML document

Tips for effectively managing asynchronous tasks

Crafting an iframe that dynamically adjusts with Tailwind CSS

Is your $http request causing an XML parsing issue?

What does the concept of hydration entail when working with React?

Tips for showcasing the chosen radio button onclick in Angular within ngFor

Is it possible to load a webpage in a WebBrowser control without displaying certain HTML elements by their IDs

Issue with rollover button function in Firefox and Internet Explorer when attempting to submit

Unexpected issue encountered when working with JSON in Node.js

Using Material UI's ProgressBar to create a countdown feature in a React