You are here: Reference > JavaScript > client-side > HTML DOM > methods > setAttribute

setAttribute method

Browser support:
Adds an attribute with the specified name and value to the current element.
If an attribute with the same name exists on the current element, then it modifies its value.
  • In XML documents, the name is case-sensitive.
  • In HTML documents, the name is case-insensitive in Firefox, Opera, Google Chrome, Safari and in Internet Explorer from version 8.
  • In Internet Explorer earlier than version 8, the default is that the name is case-sensitive in HTML documents but these settings can be modified by the caseSens parameter of the setAttribute method.

Syntax:

object.setAttribute (attributeName, attributeValue [, caseSens]);
You can find the related objects in the Supported by objects section below.

Parameters:

attributeName
Required. String that specifies the name for the attribute.
If you want to set a value for an HTML attribute, than use the name of the HTML attribute in Firefox, Opera, Google Chrome, Safari and in Internet Explorer from version 8. In Internet Explorer earlier than version 8, the corresponding JavaScript property name (camelCase name) needs to be specified. The corresponding JavaScript property names can be found on the pages for the HTML attributes. These names are usually identical, except in the following cases:
HTML attribute name JavaScript property name
accept-charset acceptCharset
class className
for htmlFor
http-Equiv httpEquiv
attributeValue
Required. String that specifies the value for the attribute. In Internet Explorer earlier than version 8, if the attribute is a custom attribute, then the value can be an arbitrary object, not only a string.
caseSens
8
Optional. Integer that specifies the case-sensitivity for the name of the attribute. This parameter is only supported in Internet Explorer earlier than version 8.
One of the following values:
0
The first attribute with the specified name, regardless of its case, will be overwritten.
1
Default. The first attribute with the specified name, with respect to its case, will be overwritten.

Return value:

This method has no return value.

Methods for attributes without namespaces:

Name Browser Description
createAttribute
Creates a new attribute node with the specified name.
getAttribute
Returns the value of the attribute with the specified name from the current element.
getAttributeNode
Returns the attribute node with the specified name from the current element.
getNamedItem
Returns the attribute node with the specified name from the current attributes collection.
hasAttribute
8
Returns whether the current element has an attribute with the specified name or not.
removeAttribute
Removes the attribute with the specified name from the current element.
removeAttributeNode
Removes the specified attribute node from the current element.
removeNamedItem
Removes the attribute with the specified name from the current attributes collection and returns the removed attribute node.
setAttribute
Adds an attribute with the specified name and value to the current element.
setAttributeNode
Adds the specified attribute node to the current element.
setNamedItem
Adds the specified attribute node to the current attributes collection.

Example HTML code 1:

This example illustrates the use of the setAttribute method:
<head>
    <script type="text/javascript">
        function CreateAttr (button) {
            button.setAttribute ("myAttribute", "The value of the 'myAttribute' attribute");
            
                // alerts the value of the new attribute
            alert (button.getAttribute ("myAttribute"));
        }
    </script>
</head>
<body>
    <button onclick="CreateAttr (this);">Create a new attribute!</button>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

Modifying the value HTML attribute with the setAttribute method:
<head>
    <script type="text/javascript">
        function ModifyButtonLabel (button) {
            button.setAttribute ("value", "New label");
        }
    </script>
</head>
<body>
    <input type="button" value="Modify my label!" onclick="ModifyButtonLabel (this);" />
</body>
Did you find this example helpful? yes no

Example HTML code 3:

This example uses the value property to modify the label of an input:button element:
<head>
    <script type="text/javascript">
        function ModifyButtonLabel (button) {
            button.value = "New label";
        }
    </script>
</head>
<body>
    <input type="button" value="Modify my label!" onclick="ModifyButtonLabel (this);" />
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content