mozilla

Revision 201350 of JavaScript

  • Revision slug: Talk:CSS/Getting_Started/JavaScript
  • Revision title: JavaScript
  • Revision id: 201350
  • Created:
  • Creator: Rod Whiteley
  • Is current revision? No
  • Comment Reply to comment

Revision Content

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)

Revision Source

<p>This makes sense to me - but where I run into problems is -retrieving- CSS element data. </p><p>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. </p><p><br>
Here is an example: </p><p>In the CSS file:
</p>
<pre class="eval">#square {
 position: fixed; 
 width: 20em;
 height: 20em;
 border: 2px inset gray;
 margin-bottom: 1em;
 left: 200px;
 top: 200px;
 background-color: green;
 }
</pre>
<p>Change the javascript: </p>
<pre class="eval">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)
 }
</pre>
<p>-- <a href="User:Spark343">Spark343</a>
</p><p>This is not a good place to discuss JavaScript programming techniques. I suggest one of mozillaZine's <a class="external" href="http://forums.mozillazine.org/index.php?c=7">Development</a> forums is probably a better place.
</p><p>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.
</p><p>To work with a value in a stylesheet you can use the first two ways. For example, you can write:
</p>
<pre class="eval">alert(document.styleSheets[0].cssRules[0].cssText)
</pre>
<p>Additionally, the window can find an element's current style. For example, you can write:
</p>
<pre class="eval">alert(window.getComputedStyle(square, "").backgroundColor)
</pre>
<p>-- <a href="User:Rod_Whiteley">Rod Whiteley</a> 02:19, 7 April 2006 (PDT)
</p>
Revert to this revision