Skip to main content

Visit Mozilla.org

Talk:Gecko DOM Reference:Examples

From MDC

[edit] getComputedStyle example

I don't think the getComputedStyle preface is correct. The function works for me, even if the style is changed via javascript or in the style="..." attribute of the tag. Here's my code in which I tried setting the background style to different values: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
 <title>getComputedStyle example</title>

 <script type="text/javascript">
   function cStyles() 
  {
   var RefDiv = document.getElementById("d1");

   var txtHeight = document.getElementById("t1");
   var h_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
   txtHeight.value = h_style;

   var txtWidth = document.getElementById("t2");
   var w_style = 
document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
   txtWidth.value = w_style;

   RefDiv.style.backgroundColor="rgb(173, 0, 0)"; // red
   var txtBackgroundColor = document.getElementById("t3");
   var b_style = 
document.defaultView.getComputedStyle(RefDiv,
null).getPropertyValue("background-color");
   txtBackgroundColor.value = b_style;
  }
 </script>

 <style type="text/css">
   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230);  /* light blue */
height: 20px; max-width: 20px; }
 </style>

</head>

<body>

<div id="d1" style="background-color: rgb(0, 0, 230); /* dark blue */"> </div>

<form action="">
<p><button type="button" onclick="cStyles();">getComputedStyle</button>
  height<input id="t1" type="text" value="1">
  max-width<input id="t2" type="text" value="2">
  bg-color<input id="t3" type="text" value="3"></p>
</form>

</body>

Does this also work for any of you? The description of the example should probably be changed. Jazzmaphone 10:02, 13 August 2007 (PDT)

Retrieved from "http://developer.mozilla.org/en/docs/Talk:Gecko_DOM_Reference:Examples"