5 Ways that CSS and JavaScript Interact That You May Not Know About

CSS and JavaScript: the lines seemingly get blurred by each browser release. They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely. We have our .js files and our .css, but that doesn't mean that CSS and JS can't interact more closely than the basic JavaScript frameworks will allow. Here are five ways that JavaScript and CSS work together that you may not know about!

We know that we can get basic CSS style values for an element with the style property, but what about pseudo-element properties? Yes, JavaScript can even access those too!

// Get the color value of .element:before var color = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('color'); // Get the content value of .element:before var content = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('content');

You can see how I access the content property value in my blog post about Device State Detection. Incredibly useful if you're looking to create dynamic, unique sites!

We've all used the addClass , removeClass , and toggleClass methods in our favorite JavaScript libraries. For the sake of supporting older browsers, each library would grab the element's className (in its string format) and appending/removing the class, then updates the className string. There's a newer API for adding, removing, and toggling classes, and it's called classList:

myDiv.classList.add('myCssClass'); // Adds a class myDiv.classList.remove('myCssClass'); // Removes a class myDiv.classList.toggle('myCssClass'); // Toggles a class

classList has been implemented for a long time in most browsers, but this API hit IE at version 10.

We're all well versed in modifying styles via the element.style.propertyName method, and we've used JavaScript toolkits to do it, but did you know you can actually read and write rules within new and existing stylesheets? The API is actually quite simple too!

function addCSSRule(sheet, selector, rules, index) { if(sheet.insertRule) { sheet.insertRule(selector + "{" + rules + "}", index); } else { sheet.addRule(selector, rules, index); } } // Use it! addCSSRule(document.styleSheets[0], "header", "float: left");

The most common use case is creating a new stylesheet, but if you want to modify an existing stylesheet, go for it.

Lazy-loading resources like images, JSON, and scripts is a great way to decrease load time. We can load those external resources with JavaScript loaders like curl.js, but did you know you can lazy load stylesheets and get that notification within the same callback?

curl( [ "namespace/MyWidget", "css!namespace/resources/MyWidget.css" ], function(MyWidget) { // Do something with MyWidget // The CSS reference isn't in the signature because we don't care about it; // we just care that it is now in the page } });

This blog lazy loads PrismJS, the syntax highlighter, based on the presence of pre elements. Once all resources are loaded, including the stylesheet, I can fire off a callback. Useful!

CSS' pointer-events property is interesting in that it almost acts in a JavaScript-like way, effectively disabling an element when the value is none but otherwise allowing the element to function per usual when the value isn't none . You may be saying "so what?!" but pointer-events even prevent JavaScript events from firing!

.disabled { pointer-events: none; }

Click on that element and any addEventListener callback you've placed on the element will not fire. A perfect property, really -- you don't need to do a className check before you decide whether or not to fire something based on class presence.

Those are just five ways that CSS and JavaScript interact that you don't always think of. Have more ideas? Please share them!