Simpltry

No, not me personally. Trust me, I’m as suave as Marvin in his hey. What I’m talking about is getting the rendered style of an element. In the old days (2004) we would use something like

<code>var foo = element.style.width;</code>

This simple statement works great - until you need to access styles in an external css document. The style attribute, unfortunately, only works with styles set inline.

Prototype comes to the rescue with the getStyle() method. Its syntax is relatively straight-forward; give it an element and a style to fetch, and it will give you the computed style of the element, that is, all inline and external styles that are currently applied to the element.

<code>var foo = Element.getStyle(&#039;element&#039;,&#039;backgroundColor&#039;);</code>

Problems ahead

This is great, except it doesn’t work. Or more to the point it doesn’t quite work at the moment. You see, you should be able to pass in styles as either hyphenated or camelCased (newWordsAreCapitalized), but it’s a bit buggy - only the hyphenated version works. The camelCased version will simply return an empty string. Hence, the code above needs to change slightly:

<code>var foo = Element.getStyle(&#039;element&#039;,&#039;background-color&#039;);</code>

One more gotcha

If you’re like me, you’re so used to developing your css in shorthand that you forget the longhand. If you’re trying to get the width of a border, just using ‘border’ isn’t going to cut it. In fact, from what I’ve been able to unearth^* even ‘border-width’ doesn’t cut it, you have to use the fully expanded version:

<code><br />

var foo = Element.getStyle(&#039;element&#039;,&#039;border-left-width&#039;);<br />

</code>

That code is your huckleberry, with it, foo is now equal to the width of the left side of your border.

^* Prototype 1.5rc1