October 6, 2001 - Initializing the style Object

October 6, 2001 Initializing the style Object Tips: October 2001 Yehuda Shiran, Ph.D. Doc JavaScript

The style object's zoom property does not inherit its initial value from its corresponding STYLE rule. You need to initialize it by yourself, in your JavaScript code. The following text box affects the zoom factor of the element below it ("Have you read our columns about Print Templates?"). Every time you hit the RETURN key, the zoom factor is being updated, not before its previous zoom factor is printed to an alert box. Play around with it for a while: % Notice that the alert box does not include the zoom factor specified in the STYLE's #container1 rule, although its effect is clearly noticeable (200%). Here is the how we define the STYLE rule #container1 in this tip:

#container1
{
  zoom:200%;
  position:relative;
} 

To remedy this problem (the style object's zoom property not initialized), you need to explicitly initialize the style's zoom property. We added an onload event handler to this tip's BODY tag, which is set to init(). The init() function looks like this:

<SCRIPT LANGUAGE="JavaScript">
<!--
function init() {
  container2.style.zoom = "150%";
}
// -->
</SCRIPT>

Play around now with the following text box that impacts the zoom factor of container2 below. After you hit the RETURN key, the alert box will include the initial zoom factor (150%):

%

Here is the how we define the STYLE rule #container2 in this tip:

#container2
{
  zoom:150%;
  position:relative;
} 

And here is the code for container2 and its event handler, updateZoom2():

<INPUT ID="zoomfactor2" TYPE="text" VALUE="50" SIZE="3" MAXLENGTH="4" onkeyup="updateZoom2()">%
<DIV ID="container2">
Have you read our columns about Print Templates?
</DIV></P>
<SCRIPT LANGUAGE="JavaScript">
<!--
function updateZoom2() {
  if (event.keyCode != 13) return;
  alert("The zoom factor was " + container2.style.zoom);
  container2.style.zoom = zoomfactor2.value;
}
// -->
</SCRIPT>

Notice that, for consistency reasons, we initialize the text box to the same value we set the zoom factor to in the init() function.

This tip works on IE 6.0 and above.