Finding a Style Property s Value

Finding a Style Property's Value

Although JavaScript can be used to determine the current value of a CSS property simply enough by using the DOM, it can do so only after the style property's value has been set using JavaScript. In other words, JavaScript cannot directly read the styles set in the style sheet. The workaround I've shown in previous examples in this book is simply to initialize the styles using JavaScript (see "Finding an Object's Style Property Values" in Chapter 14, for example).

There is a method that allows you to directly query the styles. However, because of cross-browser differences, the cure may end up being worse than the poison.

The biggest problem is that different browsers will often deliver the same values, but in completely different formats. For example, while Mozilla browsers will always return color in RGB units (regardless of the color units used to define the property in the style sheet), Internet Explorer and Opera will always return the color value as set in the style sheet ( Figures 18.1 and 18.2).

Figure 18.1. In Firefox, the font-size value is displayed as 16px, the calculated value from 1em.

Figure 18.2. In Opera, the value for the font size is reported exactly as it is entered in the style sheet.

Another distinct disadvantage of this method is that it will not work in Safari or earlier versions of Opera.

To find the value of a style property as set in a style sheet:

function findStyleValue(objectID, styleProp, IEStyleProp) {...}

Add the function findStyleValue() to your Web page (Code 18.1).

Code 18.1. The function `findStyleValue()` can be used in Internet Explorer, Firefox, or Opera to directly query the property values set in a style sheet.

[View full width]

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD /xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>CSS, DHTML &amp; Ajax | Finding an Object's Set Style Property Value</title>  <script type="text/javascript"> function findStyleValue(evt, styleProp, IEStyleProp){      var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id :  null);      var object = document.getElementById (objectID);      if (object.currentStyle) return object.currentStyle[IEStyleProp]      else if (window.getComputedStyle) {         compStyle = window.getComputedStyle (object, '');      return compStyle.getPropertyValue      (styleProp);  }}  </script>  <style type="text/css" media="screen">  .dropBox {       position: absolute;       text-align: right;       padding: 4px;       background-color: #FFFFFF;       border: 2px solid #f00;       cursor: pointer; }  #object1 {       z-index: 3;       top: 285px;       left: 315px;       background: white url(alice22a.gif) no-repeat;       height:220px;       width:150px;}  #object2 {       z-index: 2;       top: 210px;       left: 225px;       background: white url(alice15a.gif) no-repeat;       height:264px;       width:200px;}  #object3 {       z-index: 1;       top: 105px;       left: 115px;       background: white url(alice28a.gif) no-repeat;       height:336px;       width:250px;}  #object4 {       z-index: 0;       top: 5px;       left: 5px;       background: white url(alice30a.gif) no-repeat;       height:408px;       width:300px;}  </style>  </head>  <body>  <div   onclick= "alert(findStyleValue(event, 'font-size',  'fontSize'));"> Object 1</div>  <div   onclick= "alert(findStyleValue(event, 'font-size',  'fontSize'));"> Object 2</div>  <div   onclick= "alert(findStyleValue(event, 'font-size',  'fontSize'));"> Object 3</div>  <div   onclick= "alert(findStyleValue(event, 'font-size',  'fontSize'));"> Object 4</div>  </body></html>

This script uses the event object passed to it to address the object and then uses feature sensing to use either the currentStyle[] array (for Internet Explorer and Opera 9+) or getPropertyValue() method (for Mozilla) to return the style value.

Notice that you're actually passing two different versions of the style property being queried. This is because Mozilla uses the standard CSS format for the style property, while Internet Explorer uses the style name in JavaScript notation.

#object1 {...}

Set up the object(s) you'll be querying as IDs in your CSS and then in your HTML.

findStyleValue(event, 'font-size', 'fontSize')

Add a function call for findStyleValue, passing it the triggering event object as well as both forms of the CSS property name you are accessing.