Skip to content

Instantly share code, notes, and snippets.

@louisremi
Created February 23, 2011 07:39
Show Gist options
  • Save louisremi/840141 to your computer and use it in GitHub Desktop.
Save louisremi/840141 to your computer and use it in GitHub Desktop.
Why is IE9 Another Thorn in our Side?
/*
* margin-top or marginTop?
* When to use lower-case and camel-case property names in JavaScript.
*/
// Setting style: camel-case
elem.style.marginTop = '10px';
// Getting style: camel-case
var value = elem.style.marginTop;
// Getting computed style: lower-case
var value =
window.getComputedStyle(elem).getPropertyValue( 'margin-top' );
/* Vendor prefixed properties are slightly different */
// Setting or getting style: camel-case with leading upper-case
elem.style.MozTransform = "rotate(90deg)";
// or WebkitTransform or OTransform
// Getting computed style: lower-case with leading dash
var value =
window.getComputedStyle(elem).getPropertyValue( '-moz-transform' );
// or "-webkit-transform" or "-o-transform"
/* Trickier: setting the transition property */
// mixed camel-case and lower-case
elem.style.MozTransition =
"margin-top 1s ease, -moz-transform 1s linear";
/* Too complex?
* No worries, JavaScript libraries can handle that for you
*/
// Setting style with jQuery: any form can be used
$( elem ).css( 'margin-top', '10px' );
// Getting computed style with jQuery: any form can be used
$( elem ).css( 'marginTop' );
// Even with vendor prefixed properties
$( elem ).css( 'MozTransform' );
/* Conversion is actually really easy using regular expressions */
function camelCase( name ) {
return name.replace(/-([a-z])/g, function( all, letter ) {
return letter.toUpperCase();
});
}
function lowerCase( name ) {
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
}
/*
* They work both for "standard" properties AND vendor prefixed ones!
* ...
* Introducing IE9
*/
// Setting and Getting style: camel case without leading upper-case!
elem.style.msTransform = "rotate(90deg)";
/* Thought dirty browser-specific workarounds were a thing of the past?
* Think again.
*/
function fixedCamelCase( name ) {
if ( name.indexOf('-ms-') === 0 ) {
name = name.substr(1);
}
return name.replace(/-([a-z])/g, function( all, letter ) {
return letter.toUpperCase();
});
}
function fixedLowerCase( name ) {
return name.replace(/([A-Z]|^ms)/g, "-$1").toLowerCase();
}
/* Thank god there are no style properties starting with "ms..." */
@louis_remi
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment