Interactions between javascript and CSS From http://davidwalsh.name/ways-css-javascript-interact

5-ways-css-javascript-interact.md

Interactions between javascript and CSS From http://davidwalsh.name/ways-css-javascript-interact

• GetComputedStyles
• disable pointer events
• Loading external Stylesheets
• classList

interactions-js-css.js

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


// GetComputedStyle
// 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');

// LazyLoading Stylesheets
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
	}
);

// Disable pointer event with css
// .disabled { pointer-events: none; }