JavaScript

  • Revision slug: Talk:CSS/Getting_Started/JavaScript
  • Revision title: JavaScript
  • Revision id: 201349
  • Created:
  • Creator: Spark343
  • Is current revision? No
  • Comment How to retrieve element data?

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)
 }

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>
Revert to this revision