JavaScript

This makes sense to me - but where I run into problems is -retrieving- CSS element data.

Basically what I have found is that I cannot read the values that were set in the CSS file. Once the value is set via javascript I can read it in javascript, otherwise, I'm out of luck. Any suggestions are welcome.

Here is an example:

In the CSS file:

#square {
 position: fixed; 
 width: 20em;
 height: 20em;
 border: 2px inset gray;
 margin-bottom: 1em;
 left: 200px;
 top: 200px;
 background-color: green;
 }

Change the javascript:

function doDemo (button) {
 var square = document.getElementById("square")
 alert("BackgroundColor: " + square.style.backgroundColor);  // Returns nothing
 square.style.backgroundColor = "#fa4"
 alert("BackgroundColor: " + square.style.backgroundColor);  // Returns #fa4 as expected  
 
 button.setAttribute("disabled", "true")
 setTimeout(clearDemo, 2000, button)
 }

-- Spark343

This is not a good place to discuss JavaScript programming techniques. I suggest one of mozillaZine's Development forums is probably a better place.

Briefly, there are three ways to work with CSS in JavaScript. This page shows the third way: "working with an individual element in the DOM—modifying its style independently of the document's stylesheets". You cannot work with a value in a stylesheet this way.

To work with a value in a stylesheet you can use the first two ways. For example, you can write:

alert(document.styleSheets[0].cssRules[0].cssText)

Additionally, the window can find an element's current style. For example, you can write:

alert(window.getComputedStyle(square, "").backgroundColor)

-- Rod Whiteley 02:19, 7 April 2006 (PDT)