Adjusting CSS rules dynamically using JavaScript or jQuery

Question

Adjusting CSS rules dynamically using JavaScript or jQuery

I am seeking a method to dynamically change the CSS rules of an imported stylesheet within my document. The external stylesheet contains various classes and div attributes, and I aim to modify one of these rules using JavaScript or jQuery.

For example:

.red{
    color:red;
}

The goal is to use JavaScript to inform the HTML that the color property in the rule should be changed to something else, like this:

.red{
    color:purple;
}

Furthermore, I want this updated rule to apply to any new elements added through appending. So if I insert a span with the CSS class .red, its text should appear purple instead of red.

I hope my explanation is clear.

javascript jquery css dynamic stylesheet

Answer 1

Answer №1

One way to add style declarations to the DOM is by using jQuery.

$("head").append('<style>.red { color: purple }</style>');

Answer 2

One way to add style declarations to the DOM is by using jQuery.

$("head").append('<style>.red { color: purple }</style>');

Answer 3

Answer №2

To achieve this, utilize the .css() method provided by jQuery.

$('.red').css('color', 'purple');

If you have multiple rules to apply:

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

When adding dynamic elements to the DOM in the future through appending, assign a class or id to those elements and then define your CSS rules as shown above after appending them; this way, the rules will be applied to all dynamically created elements.

View working example

Note

In my opinion, adding dynamic rules is not the best approach. It is advisable to load an external CSS file instead.

However, if you do require a method similar to adding dynamic rules:

$('head').append(
  $('<style/>', {
    id: 'mystyle',
    html: '.red {color: purple }'
  })
);

For any future modifications:

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

View another working sample

Answer 4

To achieve this, utilize the .css() method provided by jQuery.

$('.red').css('color', 'purple');

If you have multiple rules to apply:

$('.red').css({
    'color': 'purple',
    'font-size': '20px'
});

When adding dynamic elements to the DOM in the future through appending, assign a class or id to those elements and then define your CSS rules as shown above after appending them; this way, the rules will be applied to all dynamically created elements.

View working example

Note

In my opinion, adding dynamic rules is not the best approach. It is advisable to load an external CSS file instead.

However, if you do require a method similar to adding dynamic rules:

$('head').append(
  $('<style/>', {
    id: 'mystyle',
    html: '.red {color: purple }'
  })
);

For any future modifications:

$('#mystyle').append(' .someother { color: green; font-size: 13px } ');

View another working sample

Answer 5

Answer №3

If you're looking to implement a new style rule without directly editing individual elements, consider using the CSSStyleSheet.insertRule() method. This function requires two arguments: the rule in string format and where it should be inserted.

An illustration from the provided hyperlink:

// Adding a fresh rule at the beginning of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);

In this particular scenario, the variable myStyle refers to the .sheet property of a style element.

It seems that the style element must be added to the document prior to accessing its sheet, and it cannot be an external sheet. Alternatively, you can acquire a sheet from document.styleSheets, like so:

var myStyle = document.styleSheets[1]; // Ensure it's not a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);

Please note: It is suggested on the page to modify elements by altering their classes instead of changing the rules directly.

Answer 6

If you're looking to implement a new style rule without directly editing individual elements, consider using the CSSStyleSheet.insertRule() method. This function requires two arguments: the rule in string format and where it should be inserted.

An illustration from the provided hyperlink:

// Adding a fresh rule at the beginning of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);

In this particular scenario, the variable myStyle refers to the .sheet property of a style element.

It seems that the style element must be added to the document prior to accessing its sheet, and it cannot be an external sheet. Alternatively, you can acquire a sheet from document.styleSheets, like so:

var myStyle = document.styleSheets[1]; // Ensure it's not a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);

Please note: It is suggested on the page to modify elements by altering their classes instead of changing the rules directly.

Adjusting CSS rules dynamically using JavaScript or jQuery

Answer №1

Answer №2

View working example

Note

View another working sample

Answer №3

Similar questions

Tips for generating a new div for every iteration:

What is the best way to clear a specific array in JavaScript?

What is the best way to store multiple values in local storage using useState in react?

What is the solution for resolving an Element that implicitly has said it has an 'any' type as the expression of type 'string' cannot be used to index the type?

I'm curious, is there a specific size at which jQuery Mobile begins to slow down? And if we were to add thousands of LIs

Utilizing jQuery to send an Ajax GET request for a JSON file

Having Trouble Deploying NextJS Site on Gh-Pages Despite Using basePath and assetPrefix

Guide on importing CDN Vue into a vanilla Typescript file without using Vue CLI?

Align your text to the right within Bootstrap 4 breadcrumbs

Preventing the cascading effects of past hovers with AngularJS

Using Javascript to extract information from the div element

React Modals: Only the modal component triggered by the first click will open, with no other modals opening

Minimizing the use of numerous nested callbacks during the animation of multiple objects

Issue encountered in the tabs section: Upon clicking a tab, an error arises indicating that the style property

Ways to customize the bootstrap-datetimepicker to display time in 15-minute increments

Embracing AngularStrap's Popover Feature

Struggling to fetch data from the Strapi page is posing a challenge

Error encountered while attempting to develop a simple WordPress AJAX plugin

The jQuery method .find() is unable to locate the <option> tag and behavior unpredictably

Dynamically allocate a controller to an element following the Bootstrap process