Modify the value of the attribute "class" for a particular element

Question

Modify the value of the attribute "class" for a particular element

I am currently using the cur_font class in my CSS stylesheet. I would like to switch the font-family to 'arial' using jQuery and have this new font apply to the html, body, h2, h1, div, and td selectors.


    <style>
    .cur_font html,body,h2,h1,div,td { font-family:'tahoma'; }
    </style>

    <script>
        $(".change_font").on("click", function (e) {
            var font='arial';
            $("style.cur_font").css("font-family",font);
        });
    </script>

I am attempting to update the font-family property for the cur_font class using jQuery

html jquery css

Answer 1

Answer №1

To easily accomplish this task, one method is to toggle a class on the body element and apply different styles accordingly.

Another approach involves looping through document.styleSheets, then iterating over the cssRules to check for matching selectorText. If there's a match, the rule can be modified.

An alternative option is to utilize a CSS variable and update the variable value dynamically.

document.querySelector(".buttons").addEventListener("click", evt => {
  const btn = evt.target.closest("button");
  if (!btn) return;

  const color = btn.dataset.color;
  document.documentElement.style.setProperty('--myVariable', color);
});

:root {
  --myVariable: red;
}

div {
  background-color: var(--myVariable);
}

<div>Hello World</div>

<div class="buttons">
  <button data-color="blue">blue</button>
  <button data-color="red">red</button>
  <button data-color="yellow">yellow</button>
</div>

Answer 2

To easily accomplish this task, one method is to toggle a class on the body element and apply different styles accordingly.

Another approach involves looping through document.styleSheets, then iterating over the cssRules to check for matching selectorText. If there's a match, the rule can be modified.

An alternative option is to utilize a CSS variable and update the variable value dynamically.

document.querySelector(".buttons").addEventListener("click", evt => {
  const btn = evt.target.closest("button");
  if (!btn) return;

  const color = btn.dataset.color;
  document.documentElement.style.setProperty('--myVariable', color);
});

:root {
  --myVariable: red;
}

div {
  background-color: var(--myVariable);
}

<div>Hello World</div>

<div class="buttons">
  <button data-color="blue">blue</button>
  <button data-color="red">red</button>
  <button data-color="yellow">yellow</button>
</div>

Modify the value of the attribute "class" for a particular element

Answer №1

Similar questions

Update the fuelux treeview after uploading a file

What is the best way to change an image when hovering over it?

Dilemma with Buttons

Place the button and text box side by side

Is it possible to use Primefaces tooltip to show at the bottom of the page

Steps for generating an HTML button when an Angular function evaluates to true

Bootstrap Table with Vertical Heading that Responds to Different Screen Sizes

The unexpected syntax error, indicated by an ampersand followed by a quotation mark, was encountered in [location] on line 7

Looking to update a component in Vue 3 and Laravel 9 without the need to reload the entire webpage

conceal the HTML code from the students

What is the best way to transition an absolute positioned element from right to center?

An issue arises when attempting to capture a screenshot with three.js, displaying the error message: "'modelViewMatrix' is a data that cannot be modified or configured."

Is your Javascript navigation functioning properly on some submenus while encountering issues on others?

Unable to incorporate additional functions while using directives

Implementing dynamic content updating in WordPress by passing variables and utilizing AJAX

Failure of Bootstrap tooltips to function properly on iOS and Android devices

Is there a way to generate embedded video code using PHP?

What is the proper way to mention JavaScript packages when including them as parameters in Angular elements within HTML?

Stop the floating left div from wrapping onto a new line

Encountering issues with Font Awesome loading while using a Python simple HTTP server