why are cssrule properties not applied to the dom objects when an html page is first rendered?

Question

with a simple style sheet:
.box { opacity: .30; width: 300px; }
and an object

hi

You cannot run JS to get the following answers as I would expect:

alert(b.style.width);
and
alert(b.style.opacity)
or moreover
alert(b.style.MozOpacity)



If they are not in the style property, then where can I get this information. I know I can get the width, that one is updated into the .clientWidth property on the object. But nothing in the "style" object gets updated. This seems strange. Opacity is really what I am after here and I know it's different betwee browsers




(firefox specific code)
------------------------------------------------
test program source:

hi

AND THE SIMPLE VERSION OF THE ANSWER IS:

getComputedStyle(object)



window.getComputedStyle(document.getElementById(oId));

Thanks Ron!

A good reference for this solution and the reason behind it can be found at:
http://www.oreillynet.com/pub/a/javascript/excerpt/JSDHTMLCkbk_chap5/index5.html

Answer 1

Your source is a bit non-standard and ambiguous, which unnecessarily turns on quirks rendering mode in the browser, which can render style cascades or bubbling events strangely. Also, you are doing 4 things that should never be done. The first is that you're attempting to access the DOM before the page has been rendered (the script is run in the sequence it is read on the page. In other words, if your script was placed before your div element, you would get an error saying the object b does not exist.). This means the DOM has not been finalized for the page (it is not a serial object; it is a tree object, so the entire page document must be analyzed in order to build it). For example, although the width of the div is specified in the style element, the computed width (which is sent to the DOM) is also affected by the width of the body element and the canvas, which have not yet been completely rendered. Similarly, the opacity will be affected by the opacity of its containers.
The second thing your script is doing is using id's as objects. You should be using the getElementById method, which has been standard for years and is standard across all XML languages. Your script will not work in some browsers, except in legacy mode (this method of scripting is like continuing to use obsolete objects like document.all). The third thing is that you have not told the browser what scripting engine to use to interpret your script. Somewhere on this page should have been a reference that your script is "text/javascript", and not, say, "text/VBscript" or some other scripting language.
The 4th thing is the one that is at fault for not getting anything back from your script. The style property of an element returns a style object with only the style properties set on the object's style attribute. This is pretty useless unless you are setting those properties dynamically and need to know what the script has set them to.
You are actually after the computed style of the element, which is the final style of the element after the style cascade. You can get this from the window.getComputedStyle(oElement, strPseudoEl) method (As a standard string, this would actually be document.defaultView.getComputedStyle(blah), but document.defaultView returns the window object in Mozilla, so no need to go through that hassle).
I recommend you thumb through DOM Core Level 2, Views Level 2, and Style Level 2, which are all supported by Firefox (and mostly by IE). You can find them all at http://www.w3.org/DOM/DOMTR . Also, look through the Javascript 1.6 docs and Mozilla's DOM implementation at http://developer.mozilla.org/en/docs/JavaScript .
To have your script behave in the way you want it to, I would modify it to the following:
=====

Answer 2

I believe that the style is only telling the browser how to render an element and in this case are not proprieties that are a part of the DOM.

As I understand it setting a CSS class name won't set the properties of the style attribute. You would have to set the style attribute. You can, of course, change or return the class name using the DOM.

So it looks like you are trying to return the style properties but don't have them set in the DOM, just in the class.

ex