SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting Style Information from an Element?

    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:
    Code:
    window.onload = function () 
          {
            alert(document.getElementById('p1').style.backgroundColor);
          }
    Now if I set the style of the 'p1' element inline, then it displays correctly.
    HTML Code:
    <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.
    HTML Code:
    <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

  2. #2
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is it you are trying to do? Maybe I can help.

  3. #3
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is how I have solved that problem, can anyone see any problems with this?
    Code:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •