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

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

getAttribute method

Browser support:

Returns the value of the attribute with the specified name from the current element.

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-insensitive in HTML documents but these settings can be modified by the caseSens parameter of the getAttribute method.

Syntax:

object.getAttribute (attributeName [, flags]);

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

Parameters:

attributeName

Required. String that specifies the name of the attribute.

If you want to get a value of an HTML attribute, then 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

flags


8

Optional. Integer that specifies the case-sensitivity for the name of the attribute and the type of the returned value.

This parameter is only supported in Internet Explorer earlier than version 8.

A value of 0 means that the search is case-insensitive and the returned value does not need to be converted. Other values can be any combination of the following integer constants with the bitwise OR operator:

Case-sensitive search.

Returns the value as a string.

Returns the value as an URL.

Return value:

If no attribute is specified with the given name, it returns null, else it returns the value of the matching attribute.

In Internet Explorer before version 8, if an attribute has a default value and the attribute is not specified, then the getAttribute method retrieves the default value. If you want to detect whether an element has an attribute with the given name, use the hasAttribute method in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 8. In earlier versions of Internet Explorer, use the getAttributeNode method and the specified property.

Methods for attributes without namespaces:

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 getAttribute method:

<head>
    <script type="text/javascript">
        function GetOnClickAttrValue (button) {
            alert (button.getAttribute ("onCliCk", 0));
            alert (button.getAttribute ("onCliCk", 1));        // Internet Explorer (case-sensitive search, returns null)
        }
    </script>
</head>
<body>
    <button onclick="GetOnClickAttrValue (this);" >Get the value of the onclick attribute!</button>
</body>