Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Intermediate
Jan 27, 2000

Retrieve Explicit Values With the CurrentStyle Property

Browsers Targeted: Internet Explorer 5

Normally, if you don't explicitly set a CSS property in a style sheet or style attribute, querying the style for that property will return an empty value. This is not to say that the property isn't set, only that it is either a descended property from some other element or it has a default value that the system doesn't explicitly need to track. However, you will probably encounter situations where you need to know the value of a property (say the position of an element) without having explicitly declared it beforehand.

In Internet Explorer 5.0, you can do this with the currentStyle property. This property exposes the same properties as the standard style property, but it will retrieve the explicit values of the properties even if they haven't been set elsewhere. Note that you can set CSS properties derived from currentStyle, but the property itself is asynchronous—it will reflect the older value until the screen buffer has had a chance to redraw.

 
<script language="JavaScript">
    function getCurrentInfo(me){
        buf="<table>"
        buf+="<tr><td>width</td><td>"+me.currentStyle.width+"</td></tr>";
        buf+="<tr><td>height</td><td>"+me.currentStyle.height+"</td></tr>";
        buf+="<tr><td>left</td><td>"+me.currentStyle.left+"</td></tr>";
        buf+="<tr><td>top</td><td>"+me.currentStyle.top+"</td></tr>";
        buf+="<tr><td>color</td><td>"+me.currentStyle.color+"</td></tr>";
        buf+="<tr><td>background-color</td><td>"+me.currentStyle.backgroundColor+"</td></tr>";
        buf+="<tr><td>font-size</td><td>"+me.currentStyle.fontSize+"</td></tr>";
        buf+="<tr><td>font-weight</td><td>"+me.currentStyle.fontWeight+"</td></tr>";
        buf+="<tr><td>font-family</td><td>"+me.currentStyle.fontfamily+"</td></tr>";
        buf+="<tr><td>position</td><td>"+me.currentStyle.position+"</td></tr>";
        buf+="<tr><td>display</td><td>"+me.currentStyle.display+"</td></tr>";
        buf+="</table>";
        me.innerHTML=buf        
        }
</script>
 
<div id="displayInfo" style="border:outset 3pt #C0C0C0;cursor:hand" 
onclick="getCurrentInfo(this)">
Click on this sentence to get current information about the line.
</div>
Click on this sentence to get current information about the line.
Kurt Cagle
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap