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

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

attrName property (event)

Browser support:

9

Retrieves a string that specifies the name of the modified attribute.

This property of the event object is only available in DOMAttrModified event handlers. Use the attrChange property to get the type of the action that modified the attribute. You can get the previous and the current value of the modified attribute with the prevValue and newValue properties.

In Internet Explorer before version 9, use the onpropertychange event and the propertyName property to get the name of the modified attribute. See the description of the onpropertychange and DOMAttrModified events and the example below for further details.

Syntax:

object.attrName;

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

This property is read-only.

Possible values:

String that represents the name of the attribute.

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 attrName 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>