SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post How do you retrieve your css information?

    Hey there,

    This is a very trivial problem, but I just can't solve it. If you have styles set up in your css, how would you retrieve those using javascript? Let me give you an example. Consider the following in your html page
    HTML Code:
    <div id="getStyle">
    <h1 onclick="showStyle()">Test</h1>
    </div>
    Now, let's say you have the following css rules applied
    Code:
    <style type="text/css">
    #getStyle
    {
    	width: 100px ;
    	height: 100px ;
    	background: red ;
    }
    
    </style>
    And finally, here's the simple javascript function that I tried to read those css values
    Code:
    <script type="text/javascript">
    function showStyle()
    {
    	var element = document.getElementById("getStyle") ;
    	
    	alert("width " + element.style.width + "\nHeight " + element.style.height + "\nBG " + element.style.background) ;
    }
    </script>
    The alert shows empty string, "". am I missing anything here? I know that you can read the width and height using offset values, but what about other css property that you might want to retrieve?
    Last edited by parvez; Sep 17, 2006 at 16:25.
    With Regards
    Pman
    http://www.pmansLab.com

  2. #2
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there parvez,

    try it like this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>currentStyle - getComputedStyle</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    #getStyle {
        width:100px;
        height:100px;
        background-color: red;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
    window.onload=function() {
       el=document.getElementById("getStyle");
       el.getElementsByTagName('h1')[0].onclick=function() {
    if(el.currentStyle) {
       alert('width: '+el.currentStyle.width+'\nheight: '+el.currentStyle.height+'\nbackground-color: '+el.currentStyle.backgroundColor);
     }
    else{
       cs=getComputedStyle(el,'');
       alert('width: '+cs.getPropertyValue('width')+'\nheight: '+cs.getPropertyValue('height')+'\nbackground-color: '+cs.getPropertyValue('background-color'));
       }
      }
     }
    //-->
    </script>
    
    </head>
    <body>
    
    <div id="getStyle"> 
    <h1>Test</h1> 
    </div>
    
    </body>
    </html>
    coothead

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey coothead,

    thanks a lot. It worked. Learned another thing today. Thanks a lot for the help. I don't know why the browsers had to go through all that way to get these values where they could simply use element.style.whatever ; after playing with it for a while, I realized that if any of the values are set using javascript, then element.style.whateverProperty will work.

    anyways... i'm just curious, if there's any way to find it using FF's dom inspector. I could see the computed style in there, but I couldn't find that getPropertyValue or currentStyle.... may be there's more like this that I don't know about. Thanks again.
    With Regards
    Pman
    http://www.pmansLab.com


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
  •