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

You are here: Reference > JavaScript > client-side > style handling > properties > behavior

behavior style property

Browser support:

Sets or retrieves the URL of a behavior file.

With the behavior property you can attach HTA or HTC files to style declarations. These files are useful to create custom elements, with custom functionality. For more information, visit the behavior (MSDN) page.

If you want to attach behaviors to an element dinamically, use the addBehavior method.

Element behaviors can also be specified for namespaces. See the doImport method for details.

Syntax:

object.behavior;

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

This property is read/write.

CSS page for this property: behavior

Possible values:

The type of this property is string.

Any of the following values (use the space character to separate them, each value can be used arbitrary times):

url(#default#behaviorName)

Where behaviorName specifies the name of an Internet Explorer default behavior.

url(#objID)

Where objID specifies the value of an object element's id property.

url(URI)

Where URI specifies the location of the behavior file.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the behavior property:

Code

hover.htc

<head>
    <style>
        .example {
            behavior: url("hover.htc")
        }
    </style>
</head>
<body>
    <span class="example">Move the mouse over this text (element with behavior)</span><br />
    <span>Move the mouse over this text (element without behavior)</span>
</body>


<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="Normal()" />
<SCRIPT LANGUAGE="JScript">

var startColor;

function Hover() {
    if (event.srcElement == element) { 
        startColor = style.color;  
        runtimeStyle.color  = "pink";
        runtimeStyle.cursor = "hand";
        event.srcElement.click ();
    }
}

function Normal() {
    if (event.srcElement == element) {
    runtimeStyle.color  = startColor;
    runtimeStyle.cursor = "default";
    }
}

</SCRIPT>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the behavior property in JavaScript:

Code

hover.htc

<head>
    <script type="text/javascript">
        function GetBehavior () {
            var span = document.getElementById ("mySpan");
            alert (mySpan.style.behavior);
        }
    </script>
</head>
<body>
    <span id="mySpan" style="behavior: url('hover.htc')">
        Move the mouse over this text (element with behavior)
    </span>
    <br />
    <button onclick="GetBehavior ();">Get behavior property</button>

    <br />
    <span>Move the mouse over this text (element without behavior)</span>
</body>


<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="Normal()" />
<SCRIPT LANGUAGE="JScript">

var startColor;

function Hover() {
    if (event.srcElement == element) { 
        startColor = style.color;  
        runtimeStyle.color  = "pink";
        runtimeStyle.cursor = "hand";
        event.srcElement.click ();
    }
}

function Normal() {
    if (event.srcElement == element) {
    runtimeStyle.color  = startColor;
    runtimeStyle.cursor = "default";
    }
}

</SCRIPT>