2

Is there an easy cross-browser way to get computed style of an element in PrototypeJS, without checking document.defaultView... and other properties? ...so that the code looked like

var elt = $$('.xyz')[k],
    border = elt.getComputedStyle('border-bottom-width')

PrototypeJs provides getDimensions, -Width, and -Height methods that return computed dimensions, but there's no way to get other computed styles, like borders, backgrounds, etc.

I've found several stand-alone implementations of getComputedStyle, but maybe there's a patch/plugin for PrototypeJS that does that?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
culebrón
  • 34,265
  • 20
  • 72
  • 110

2 Answers2

4

Prototype's getStyle method encapsulates most of the cross-browser computed style work you're looking for:

var bgColor = $(element).getStyle('background-color');

From the docs:

This method looks up the CSS property of an element whether it was applied inline or in a stylesheet. It works around browser inconsistencies regarding float, opacity, which returns a value between 0 (fully transparent) and 1 (fully opaque), position properties (left, top, right and bottom) and when getting the dimensions (width or height) of hidden elements.

However, this method will not return styles applied in a stylesheet in Internet Explorer <= 8, because it uses the getComputedStyle() method, which is the incorrect method for versions 8 and lower: http://www.quirksmode.org/dom/w3c_css.html

travis-146
  • 1,075
  • 1
  • 10
  • 20
JPot
  • 4,175
  • 4
  • 23
  • 22
  • 1
    But it returns only the inline style. – culebrón Jan 13 '10 at 12:17
  • 1
    @culebron: No it doesn't, it returns the computed style, incorporating those defined in stylesheets. Check the source yourself: http://prototypejs.org/assets/2009/8/31/prototype.js (search for getStyle). You'll find `getComputedStyle` right in there. – JPot Jan 13 '10 at 12:19
  • But this isn't fully cross browser, IE <= 8 needs .currentStyle, not .getComputedStyle(). Check yourself: http://www.quirksmode.org/dom/w3c_css.html – travis-146 Apr 27 '11 at 16:00
1

Not that I know of.

This is probably because the "get computed style" implementations are so different that it's hardly possible to guarantee uniform results (Which renders them useless for a cross-browser framework).

For example, getting the computed font size cross-browser is not always possible, as I learned in this question.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • Yep, I've seen it. This question shows in the top 1st page when googling for "prototype js get computed style" – culebrón Jan 13 '10 at 11:42
  • Most (all?) js libraries have a function for getting the computed/current style for a particular property. See my answer for the prototype way. – JPot Jan 13 '10 at 12:18