Manipulating CSS with JavaScript

Manipulating CSS with JavaScript

There's no way to manipulate some CSS styles directly with JavaScript. Instead you can change a rule in a stylesheet itself, something like this:

var changeRule = function(selector, property, value) {
        var styles = document.styleSheets,
            n, sheet, rules, m, done = false;
        selector = selector.toLowerCase();
        for(n = 0; n < styles.length; n++) {
            sheet = styles[n];      
            rules = sheet.cssRules || sheet.rules;
            for(m = 0; m < rules.length; m++) {
                if (rules[m].selectorText.toLowerCase() === selector) {
                    done = true;
                    rules[m].style[property] = value;
                    break;
                }
            }
            if (done) {
                break;
            }
        }
    };
changeRule('div:hover', 'background', '#0f0');

selector must match exactly an exisiting selector, only spaces between selector text and { are ignored.

You can develope the code to find and change partial hits of selector names, or just check a particular stylesheet instead of all of them. As it is, it's also quite expensive when having tens of stylesheets with thousands of rules.

Unfortenately pseudo elements can't be manipulated with this snippet.

A live demo at jsFiddle.

Best practice for manipulating CSS from JavaScript?

I would advise just using the addClass and removeClass methods in jQuery. This way your JavaScript can be responsible for controlling behavior and your CSS remains responsible for the styling.

e.g. in your css:

.some-class {
    z-index:1001;
}

in your JavaScript:

$("#header").addClass('some-class');
//or 
$("#header").removeClass('some-class');

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

Is changing CSS styles through Javascript without the use of class bad practice?

To answer the question of "performance" between using JavaScript to set inline styles versus having a style sheet has a couple points to consider.

Redraws: There is a very negligible difference between the two. One could actually argue that inline styles have actually a performance improvement over style sheet, but it is not something that should ever become a bottleneck in your app.

Page Refresh: The browser will cache the style sheet as well as the javascript. So they both should be performant on page load.

So I would argue that this is not a performance question as much as it is a maintainability question. Is it easier to have a css class that stores styles you are planning to use over and over again. I would argue yes. If you are setting an inline style that is very specific to one use case then I would argue that it would be easier to maintain the style inline in the javascript.

How to Modify CSS Module Style via Javascript

Just set the style:

<div className={classes.time_interval} 
  style={{ gridTemplateRows: `repeat(${timeSlotRow.length}, 1fr)` }}
>{timeSlotRow}</div>

Or you could take a look at grid-auto-rows.

Set CSS property in JavaScript?

Use element.style:

var element = document.createElement('select');
element.style.width = "100px";

---

Related Topics