mistergraphx
2/18/2015 - 8:48 AM

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

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

// 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; }

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

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