You are here: Reference > JavaScript > client-side > HTML DOM > methods > recalc (document)

recalc method (document)

Browser support:
Recalculates all dynamic properties in the current document.
The support for dynamic properties has been removed in Internet Explorer 9, so none of the styleObj.getExpression, styleObj.removeExpression, styleObj.setExpression, htmlObj.getExpression, htmlObj.removeExpression, htmlObj.setExpression and recalc methods are supported. These methods exist in version 8, but using them raises exceptions.
Dynamic properties provide a way to specify script expressions for properties of DHTML and style objects. These expressions are recalculated automatically, but if necessary, they can be explicitly updated with the recalc method.
To get, remove and set expressions, use the styleObj.getExpression, styleObj.removeExpression, styleObj.setExpression, htmlObj.getExpression, htmlObj.removeExpression and htmlObj.setExpression methods. See Example 1 for details.


object.recalc ([all]);
You can find the related objects in the Supported by objects section below.


Optional. Boolean value that specifies the type of recalculation.
One of the following values:
Default. Recalculates only those expressions that are affected by changes since the last manual or automatic recalculation.
Recalculates all dynamic expressions in the document.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the recalc method:
    <script type="text/javascript">
        var timer = null;
        var progress = 0;

        function InitPB () {
            try {
                percent.setExpression ("innerText","progress.toString ()+'0%'");
            catch (e) {
                alert ("Your browser does not support this example!");

        function Enlarge () {
            if (progress < 10) progress++;
            document.recalc ();

        function StartPB () {
            if (timer == null) {
                timer = setInterval ("Enlarge ()", 800);
                startButton.disabled = true;
                stopButton.disabled = false;

        function StopPB () {
            if (timer != null) {
                clearInterval (timer);
                timer = null;
                startButton.disabled = false;
                stopButton.disabled = true;

        function ResetPB () {
            progress = 0;
<body onload="InitPB ()">
    <div style="width:100px;border: 1px solid black"> 
        <div id="progressBar" style="background-color:lightblue" ></div>

    <div id="percent" style="color:hotpink;font-weight:bold"></div>

    <br />
    <button id="startButton" onclick="StartPB ()">Start the Timer</button><br />
    <button id="stopButton" disabled="disabled" onclick="StopPB ()">Stop the Timer</button><br />
    <button id="resetButton" onclick="ResetPB ()">Reset the Timer</button><br />
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content