In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > methods > setExpression (runtimeStyle, style)

setExpression method (runtimeStyle, style)

Browser support:


9

Sets a dynamic expression for the specified style property.

The support for dynamic properties has been removed in Internet Explorer 9, so none of the getExpression, removeExpression, setExpression and recalc methods are supported. These methods exist in version 8, but using them raises exceptions.

Dynamic expressions (also called dynamic properties) provide a way to specify script expressions for the values of style properties. These expressions are recalculated automatically, but if necessary, they can be explicitly updated with the recalc method.

Expressions can be set with the setExpression method in JavaScript or with the style expression method in CSS.

To get an expression:

use the getExpression method

to remove it:

use the removeExpression method.

See the example below for details.

Dynamic expressions are also supported for the values of DHTML properties. If you need further information about it, see the pages for the htmlObj.getExpression, htmlObj.removeExpression and htmlObj.setExpression methods.

Syntax:

object.setExpression (propertyName, expression [, language]);

You can find the related objects in the Supported by objects section below.

Parameters:

propertyName

Required. String that specifies the name of the style property. Use the name of the corresponding JavaScript property (camelCase name) instead of the name of the CSS property. The corresponding JavaScript property names can be found on the pages for the CSS properties. This parameter is not case-sensitive.

expression

Required. String that specifies the script expression for the value of the style property.

language

Optional. String that specifies the language of the expression script.

One of the following values:

JavaScript

The language is JavaScript.

JavaScript1.1

The language is JavaScript 1.1.

JavaScript1.2

The language is JavaScript 1.2.

JavaScript1.3

The language is JavaScript 1.3.

JScript

Default. The language is JScript.

VBS

Same as VBScript

VBScript

The language is Microsoft Visual Basic Scripting Edition.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of dynamic expressions for style properties:

<head>
    <script type="text/javascript">
                // Try..catch blocks need to be used because of Internet Explorer 8
        function GetExp () {
            var div = document.getElementById ("myDiv");
            try {
                var expression = div.style.getExpression ("width");
                alert ("Expression is: " + expression);
            }
            catch (e) {
                alert ("Your browser does not support the getExpression method!");
            }
        }
        function SetExp () {
            var div = document.getElementById ("myDiv");
            try {
                div.style.setExpression ("width","myInput.value + 'px'");
            }
            catch (e) {
                alert ("Your browser does not support the setExpression method!");
            }
        }
        function RemoveExp () {
            var div = document.getElementById ("myDiv");
            try {
                div.style.removeExpression ("width");
            }
            catch (e) {
                alert ("Your browser does not support the removeExpression method!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" style="background-color:blue; width:expression(myInput.value + 'px');"></div>
    <br />
    The following value specifies the width of the blue element.<br />
    Modify it and watch the blue element.
    <input type="text" id="myInput" value="40" />
    <br /><br /><br />
    With the following buttons you can get, remove and set the expression for the width style property of the blue element:<br />
    <button onclick="GetExp ()">Get expression!</button>
    <button onclick="SetExp ()">Set expression!</button>
    <button onclick="RemoveExp ()">Remove expression!</button>
</body>