Getting Style Information from an Element?

[J Windebank]

Hi guys,

I have found a bug in my code that I can't resolve. I am retrieving some style information from an element and haver found differences in the results depending on how the styles are applied.

Here is my test Javascript function:

window.onload = function () 
      {
        alert(document.getElementById('p1').style.backgroundColor);
      }

Now if I set the style of the 'p1' element inline, then it displays correctly.

<p id="p1" style="background-color: #00ff00;">Paragraph 1</p>

If, however, the style is set in an external stylesheet, or for that fact even in the head section of the document, the alert displays nothing.

<style type="text/css">
   #p1
   {
      background-color: #00ff00;
   }
</style>

<p id="p1">Paragraph 1</p>

Is this something that is documented somewhere that I can read up on, and is there some way around it? Is there a way to wait until the document is completely loaded, including all styles, before firing an event?

Regards,
Jordan

[crazedEggbeater]

What is it you are trying to do? Maybe I can help.

[J Windebank]

I am trying to get a style from an element for use in my application, which should be simple enough, but it will not retrieve the style if it is not specified inline.

[Kravvitz]

Read this.

[J Windebank]

Thanks Kravvitz.

This seems utterly ridiculous that you cannot access an elements style properties unless they are declared inline. Will try and find another workaround, thank you.

Regards,
Jordan

[Kravvitz]

Did you not read that whole page?

The style object reflects the contents of the style attribute. It's that simple. I know, it would be nice if the style object reflected the styles that are actually being applied to the element, but that's just not the way they designed it.

[J Windebank]

Sorry Kravvits, just venting at how silly this seems. One would think that if you request the style.x value from an element, you would get that value regardless of how it is set.

Am testing the way PPK mentions and see how it goes.

Regards,
Jordan

[J Windebank]

Here is how I have solved that problem, can anyone see any problems with this?

function getStyle(id, property)
{
  var element = document.getElementById(id);

  if(getCamelizedStyle(id, property) == null)
  {
    var style = getCamelizedStyle(id, camelize(property));
  }
  else
  {
    var style = getCamelizedStyle(id, property);
  }

  return style
}

function getCamelizedStyle(id, property)
{
  var element = document.getElementById(id);

  if (element.currentStyle)
  {
    var style = element.currentStyle[property];
  }
  else if (window.getComputedStyle)
  {
    var style = document.defaultView.getComputedStyle(element,null).getPropertyValue(property);
  }

  return style;
}

Camelize is a Prototype function to change background-color to backgroundColor.

Regards,
Jordan