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

You are here: Reference > JavaScript > client-side > style handling > methods > addBehavior

addBehavior method

Browser support:

Attaches the specified behavior to the current element.

Behaviors can also be specified with the behavior style property.

Syntax:

object.addBehavior (behavior);

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

Parameters:

behavior

Required. String that specifies the behavior to attach.

One of the following values:

URL

String that specifies the location of the HTC file.

#Id

Identifier of an object tag for the binary implementation of a behavior.

#default#behavior

The name of a Microsoft Internet Explorer default behavior.

Return value:

Returns an identifier of the added behavior. This identifier can be used for the removeBehavior method to remove the attached behavior.

Example HTML code 1:

This example shows how to add and remove behaviors:

Code

hover.htc

<head>
    <script type="text/javascript">
        var behaviorIDs = [];
        var divElems = [];

        function SetBehaviors () {
            divElems = document.getElementsByTagName ("div");
            for (i=0; i < divElems.length; i++) {
                if (divElems[i].addBehavior) {
                    behaviorIDs[i] = divElems[i].addBehavior ("hover.htc");
                }
            } 
        }

        function RemoveBehaviors () { 
            for (i=0; i < divElems.length; i++) {
                if (divElems[i].removeBehavior) {
                    divElems[i].removeBehavior (behaviorIDs [i]);
                }
            }
        }
    </script>
</head>
<body>
    You can add behaviors to the div elements with this button:
    <button onclick="SetBehaviors ();">Add behaviors!</button>
    <br /><br />
    Hover your mouse over the div elements!
    <br /><br />
    Use this button to remove behaviors:
    <button onclick="RemoveBehaviors ();">Remove behaviors!</button>
    <br /><br />
    <div>1. division</div>
    <div>2. division</div>
    <div>3. division</div>
</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>