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

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

propertyName property (event)

Browser support:

Specifies or retrieves a string that contains the name of the property that is changed.

This property of the event object is available in onpropertychange event handlers.

The onpropertychange event is only supported by Internet Explorer. In other browsers (and in Internet Explorer from version 9), use the DOMAttrModified event and the attrName property of the event object for similar functionality.

Syntax:

object.propertyName;

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

This property is read/write.

Possible values:

String that sets or retrieves the name of the property.

Default: this property has no default value.

Example HTML code 1:

This example shows a cross-browser solution to get the name and the new value 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) {
            var message = "";
            if ('attrChange' in event) {    // Firefox, Opera, Internet Explorer from version 9
                message += "The element: " + event.target;
                message += "\nproperty: " + event.attrName;
                message += "\noriginal value: " + event.prevValue;
                message += "\n changed to: " + event.newValue;
            }
            if ('propertyName' in event) {  // Internet Explorer
                message += "The element: " + event.srcElement.tagName;
                message += "\nproperty: " + event.propertyName;

                var elem = event.srcElement;
                message += "\nvalue changed to: " + elem.attributes[event.propertyName].value;
            }
            alert (message);
        }

        function ChangeTitle () {
            var div = document.getElementById ("myDiv");
            div.title = "New Alternate";
        }
    </script>
</head>
<body onload="AddListeners ();">
    <button onclick="ChangeTitle ();">Change alternate text!</button>
    <div id="myDiv" title="Alternate text">
        Hover the mouse over.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

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 3:

This example illustrates the use of the propertyName 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>