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

You are here: Reference > JavaScript > client-side > event handling > properties > attrChange (event)

attrChange property (event)

Browser support:

9

Returns an integer that specifies the type of the action that modified an attribute.

This property of the event object is available in DOMAttrModified event handlers. If you want to get the name of the changed attribute, use the attrName property. You can get the previous and the current value of the modified attribute, with the prevValue and newValue properties.
See the description of the DOMAttrModified event and the example below for further details.

Syntax:

object.attrChange;

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

This property is read-only.

Possible values:

Integer that represents the type of the action.

Predefined constants are available for the possible values of this property, in the scope of the MutationEvent interface. You can use them directly through the MutationEvent interface (MutationEvent.MODIFICATION) or through an instance of the event object. For further details, please see the page for the MutationEvent interface.

The value can be one of the following values (the value of a predefined constant appears in parentheses after the constant):

MODIFICATION (1)

The value of an attribute was changed.

ADDITION (2)

An attribute was added to an element.

REMOVAL (3)

An attribute was removed from an element.

Default: this property has no default value.

Example HTML code 1:

This example shows a cross-browser solution to get the name of the attribute that was changed:

<head>
    <script type="text/javascript">
        function AddListeners () {
            var elemToCheck = document.getElementById ("myDiv");
            if (elemToCheck.addEventListener) { // all browsers except IE before version 9
                    // Firefox, Opera, IE from version 9
                elemToCheck.addEventListener ('DOMAttrModified', OnAttrModified, false);
            }
            if (elemToCheck.attachEvent) {  // Internet Explorer and Opera
                elemToCheck.attachEvent ('onpropertychange', OnAttrModified);   // Internet Explorer
            }
        }

        function OnAttrModified (event) {
            if ('attrChange' in event) {    // Firefox, Opera, Internet Explorer from version 9
                alert ("The value of the " + event.target + 
                    " element's " + event.attrName + " property changed");
            }
            if ('propertyName' in event) {  // Internet Explorer
                alert ("The value of the " + event.srcElement.tagName + 
                    " element's " + event.propertyName + " property changed");
            }
        }

        function ChangeColor () {
            var div = document.getElementById ("myDiv");
            div.style.color = "#FF0000";
        }
    </script>
</head>
<body onload="AddListeners ();">
    <button onclick="ChangeColor ();">Change text color!</button>
    <div id="myDiv">
        Change the color of this text.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the attrChange property:

<head>
    <script type="text/javascript">
        function InitListener () {
            var elemToCheck = document.getElementById ("myDiv");
            if (elemToCheck.addEventListener) { // all browsers except IE before version 9
                    // Firefox, Opera, IE from version 9
                elemToCheck.addEventListener ('DOMAttrModified', OnAttrModified, false);
            }
            if (elemToCheck.attachEvent) {  // Internet Explorer and Opera
                elemToCheck.attachEvent ('onpropertychange', OnAttrModified);   // Internet Explorer
            }
        }

        function OnAttrModified (event) {
            var message = "";
            if ('attrChange' in event) {    // Firefox, Opera, Internet Explorer from version 9
                message += "Something has happened to an attribute of the " + event.target.tagName + " element.\n";
                switch (event.attrChange) {
                case MutationEvent.MODIFICATION:
                    message += "The value of the " + event.attrName + " attribute has been changed from "
                                + event.prevValue + " to " + event.newValue + ".";
                    break;
                case MutationEvent.ADDITION:
                    message += "The " + event.attrName + " attribute has been added to the element "
                                + "with the value of " + event.newValue + ".";
                    break;
                case MutationEvent.REMOVAL:
                    message += "The " + event.attrName + " attribute has been removed from the element."
                                + "The value was " + event.prevValue + " previously.";
                    break;
                };
            }

            if ('propertyName' in event) {  // Internet Explorer
                message = "The " + event.propertyName + " property of the "
                           + event.srcElement.tagName + " element has been changed.";
            }

            alert (message);
        }

        function ModifyAlign () {
            var elemToCheck = document.getElementById ("myDiv");
            if (elemToCheck.align == "right")
                elemToCheck.align = "left";
            else
                elemToCheck.align = "right";
        }

        function ModifyBackgroundColor () {
            var elemToCheck = document.getElementById ("myDiv");
            elemToCheck.style.backgroundColor = "#aaccee";
        }

        function CreateModifyRemoveAttr () {
            var elemToCheck = document.getElementById ("myDiv");
                // when an attribute is created, the onpropertychange event is not fired
            elemToCheck.setAttribute ("newAttr" , "firstValue");
                // when the value of an attribute is modified, the onpropertychange event is fired
            elemToCheck.setAttribute ("newAttr" , "secondValue");
                // when an attribute is removed, the onpropertychange event is not fired
            elemToCheck.removeAttribute ("newAttr");
        }
    </script>
</head>
<body onload="InitListener ();">
    <div id="myDiv" style="background-color:#e0c0a0;">
        The alignment can be modified with the first button<br />
        The background color can be changed with the second button<br />
        Finally, with the third button you can create, modify and remove an attribute.
    </div>
    <br /><br />
    <button onclick="ModifyAlign ();">Modify the alignment</button><br />
    <button onclick="ModifyBackgroundColor ();">Modify the color of the background</button><br />
    <button onclick="CreateModifyRemoveAttr ();">Create, modify and remove an attribute</button>
</body>