A relatively strange css/js problem

April 21, 2011 3:56 AM

Why can't my javascript see the position of an element if it's set in the CSS but it can if it's set in the style attribute?

I have some HTML...

<div class="relClass">
  [nested stuff]
    <div>object</div>
  [/nested stuff]
</div>

When something happens to the object, I want to go up and find the first container that has a relative position. So I have some JavaScript...

function findRelContainer (startingObj)
{
  relativecontainer = undefined;
  examiningnode = startingObj;
  while ( (relativecontainer==undefined) && (startingObj.id != 'wrapper') )
  {
    if (examiningnode.style.position == 'relative')
      relativecontainer = examiningnode;
    examiningnode = examiningnode.parentNode;
  }
  // do stuff to the relativecontainer
}

If I set position:relative in the CSS, this JS isn't finding the container that I want. I can check the position in Firebug and I know that the position is definitely set and it's definitely not being overridden.

If I set position:relative in a style attribute on the relevant div then it all magically works.

Anyone any ideas what the hell is going on?

posted by sodium lights the horizon to Computers & Internet (4 answers total)

Response by poster: I think this can be marked up as a wasted weekly question... I've just found the ton of information about how JS can't read anything but inline css.

Fantastic...
posted by sodium lights the horizon at 4:23 AM on April 21, 2011

That's not really true, you can do what you want: here's an example.

When you access somenode.style that's called an expando property. It applies to any attribute, and it's not specific to styles; any attribute of the element shows up as a property, whether it's built-in or user-defined. For example, if you declared <div foo=bar> then you'd be able to access x.foo and it would have the value "bar". Since your div does not have a style attribute, the .style expando is not present. That doesn't mean you can't get its computed style. As you see in the example you can do that either with the .currentStyle method (IE) or the getComputedSytle() method (Firefox).

(Also note in your example you left off var which makes relativecontainer and examingingnode global variables which is not what you want.)
posted by Rhomboid at 4:58 AM on April 21, 2011

Oh, and I forgot to mention that there is another cross-browser compatibility to worry about if you intend to access style attributes containing hyphens. Some browsers require you access them hyphenated (e.g. font-size) while the others require camel-case (e.g. fontSize) which leads to more complicated solutions like this. I'd suggest using a JS library like jQuery here so that you can forget about these details and let someone else worry about it.
posted by Rhomboid at 5:18 AM on April 21, 2011

I've just found the ton of information about how JS can't read anything but inline css.

Not exactly. When you access the style property of an element, you read and write its own personal style rules.

The CSS that’s effective in displaying the element may come from a number of places: rules built into the browser (e.g. paragraphs have 1em top and bottom margins), stylesheet rules for the element’s id or one or more of its classes, or rules relating to its place in the document relating to other elements.

In a world where style reflects all of this, what should happen when you set, say, backgroundColor on an element whose background color is determined by a rule which affects many elements?

Browsers have ways of getting an elements computed (effective) style, which Rhomboid explains, and libraries like jQuery abstract them away like magic.
posted by Sidnicious at 6:34 AM on April 21, 2011