is there a mozilla equivalent for currentStyle

so for example, if an object has its width specified as "8em", I want a property of that object which returns "8em" ?

Does window.getComputedStyle(element,null).width work for that?

Originally posted by liorean
Does window.getComputedStyle(element,null).width work for that?

Should technically be document.defaultView.getComputedStyle(). Just because Mozilla and Opera 7 both point defaultView to window does not mean all future compliant browsers will too. :)

Also, I have always used getPropertyValue() or getPropertyCSSValue() on the returned ComputedCSSStyleDeclaration because I seem to remember issues on earlier builds about the shorthand properties being absent?

var computedWidth = document.defaultView.getComputedStyle(someelement, null).getPropertyValue("width");

If you want to shortcut this, and feel comfortable using shorthand properties, I guess you could always do:

HTMLElement.prototype.__defineGetter__("runtimeStyle", function() {
return document.defaultView.getComputedStyle(this, null);
});

Note that I chose runtimeStyle instead of currentStyle. The ComputedCSSStyleDeclarations that the method returns are read-only - you cannot modify the property value. DOM2 CSS defines an override style method (document.getOverrideStyle), however Mozilla does not implement this, (Opera 7 doesn't implement any of this, not even getComputedStyle as far as I know).

defaultView is technically equivalent to the viewport, which in javascript is represented by window, so it's natural for it to be mapped there. Especially since both Opera and Mozilla set the way. (How about Konq/Saf?)

The computed style of a shorthand property shouldn't exist - it should be translated into the properties making it up.

Originally posted by liorean
defaultView is technically equivalent to the viewport, which in javascript is represented by window, so it's natural for it to be mapped there. Especially since both Opera and Mozilla set the way. (How about Konq/Saf?)

The computed style of a shorthand property shouldn't exist - it should be translated into the properties making it up.

I meant shorthand properties as in bla.width instead of bla.getPropertyValue("width"). Bad terminology on my part, now that I think about it.

As for window -> viewport, I'm not willing to concede they are one the same. window also includes various other properties not relating to the viewport. I have no problem with defaultView mapping there, but I'm not willing (maybe it's just me) to assert that defaultView will always be the window object in every browser to support DOM2.

And DOM does not talk about the window object at all - it just seems more consistent in my weird world that my DOM scripting not reflect usage of the window object either.

That's because window is also the host object in JavaScript as used in the browser - window is BOTH a reference to the viewport AND a reference to the host object, because in browsers the viewport is essentially the host environment of the scripting engine.

The DOM doesn't talk about the window because the DOM is targeted at document handling, not UI handling. You might have to be able to reference the viewport from the document to determine some properties of it, though, and that's why it exists in the DOM at all.

Yeah that document.defaultView.getComputedStyle(...).getPropertyValue() is what I tried - trouble is, that returns a computed style - a value in pixels. I want to retrieve the value in whatever unit it's actually using ..?

Then you have not choice (that I know of) but to find the style rule that originally specified the property you're trying to read.

By reading through the stylesheet line by line until I find the matching rule ... yuck ... I was afraid of that ....

Not only that - you have to read all stylesheet rules that applies the sought property to your element, sift through them to know the order and specificity and then calculate what is actually used.

"Yuck" clearly describes it, though you might prefer something a bit more colorful.

In theory, I believe you could do:

document.defaultView.getComputedStyle(someelement, null).getPropertyCSSValue("width").getFloatValue(CSSPrimitiveValue.CSS_EMS)

http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSPrimitiveValue

Look at getFloatValue(). It doesn't mandate that browsers be able to convert, but it doesn't prohibit it either. Just says to throw an exception if it can't convert, which is what my 1.4 nightly does.

Oh well... that kinda sucks. DOM2 CSS has a lot of issues though... if you've looked at hixie's journal (http://ln.hixie.ch) (a Mozilla developer and also on the CSS committee I think) lately, you'll notice his frustrations with it too. It'll change... :)

Hixie is on my reading list. The problem as I understand it, is not that Brothercake wants to get the answer in ems - he wants it in whatever format it was specified. That, I can't find any functionality for getting but the reading of the style rules that applies. And the element style attribute, of course.

late-breaking news...

"I want to retrieve the value in whatever unit it's actually using ..?"

Brothercake, if you set the attribute via cssText within the element's tag itself (rather than in a stylesheet), and then query the property you'll get the desired unit as answer.

eg: <div id=yadda style="width:10em"></div>


document.getElementById("yadda").style.width

- or -

document.getElementById("yadda").style.getPropertyValue("width")


... both return "10em" - not just "10" and not just ""

(or you can sniff via style.cssText for the full string)

Also, when setting the original value via cssText, any js changes made to the property after layout occurs will be updated in the property's value (similarly to currentStyle).

...

I realize that this is less than perfect, but depending on context might be a workable solution. If you're only targetting one or two elements or attributes, at least it's better than having to comb through all the rules. Or you could use a for() loop to set the same attribute value via cssText on a bunch of elements prior to layout.

Originally posted by realisis
if you set the attribute via cssText within the element's tag itself (rather than in a stylesheet), and then query the property you'll get the desired unit as answer.
Sure, but I didn't set the value myself - it has to work from a normal stylesheet in an environment where I don't know anything at all about what CSS is being used.

Thanks anyway :) I've since taken a different approach, in which it wasn't necessary to know.

Now I know exactly what you mean, that was very helpful!! Thanks a million!! I'll go re-check the whole thing. Also thanks for your kind information. I like your blog very much because of its interesting topics. i'm student and preparing for my exam of testking 70-270 (http://www.real-testking.com/exam/70-270.htm) for attaining the certification. Although it is not hard to get certified but it keeps me busy. I've also attained certification of another course of testking 70-294 (http://www.real-testking.com/exam/70-294.htm) which I had passed last three months back. Also I am trying to complete my pending thesis project of testking E20-361 (http://www.real-testking.com/exam/E20-361.htm) which I'm sure will be completed soon. I normally search on topics which you described on your blog these are great and really informative. Thanks for beneficial thread.