The documentation states that "jQuery has the ability to interpret both CSS and DOM formatting of properties with multiple words", but in reality, this is achieved through somewhat unreliable workarounds that may not always produce expected results.
Specifically, when you provide a DOM-style camelCaseName
, jQuery will first attempt to access the inline style declaration as style.camelCaseName
. If this fails (usually because the style was not set inline), it will then try using getComputedStyle
with the camelCaseName
converted to hyphen-separated-name
(*). The computed style can differ from the declared style as the browser may resolve various relative declarations, such as converting lengths to pixel units.
On the other hand, if you supply a CSS-style hyphen-separated-name
, jQuery will directly use the code for computed style(*) without attempting to convert it to camelCaseName
and checking the inline style.
This behavior seems somewhat unreliable and I would hesitate to rely on it entirely. To ensure consistent results, it is recommended to keep the inline style declaration off the element being measured so that the computed style is always returned, regardless of the type of name used. However, jQuery does not explicitly promise this behavior. This highlights the challenge of concealing a complex system behind a seemingly straightforward "Do What I Mean" interface.
(*): This is different in Internet Explorer where there is no getComputedStyle
function, so it resorts to a cumbersome combination of currentStyle
, runtimeStyle
, and document manipulation in an attempt to retrieve a computed style.