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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > id

id property

Browser support:

Sets or retrieves a unique identifier for the object.

The value of the id property must be unique within the entire document. Only alphanumeric characters and the underscore (_) character can be used for the string and the first character must be a letter.

You can assign style settings to the object with the id property (#id {color:red;}). See Example 1 for details.

The value of the id property can be used for the href property. In that case, the element is the target of the link. See the page for the href property or Example 2 for details.

Or you can use the identifier in the htmlFor property of the label element to attach information to controls.

Use the getElementById method to access the element with the specified id. It is a fast method to find an element in the document.

Syntax:

object.id;

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

This property is read/write.

HTML page for this property: id

Possible values:

String that sets or retrieves the identifier of the object.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the contact of the id attribute and the style settings:

<head>
    <style>
        #sampleID {color:red;}
    </style>
</head>
<body>
    <span id="sampleID">The color of this text is red.</span>
</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 id attribute for link targets:

Table of contents:
<ul>
    <li><a href="#section1">1. Section</a></li>
    <li><a href="#section2">2. Section</a></li>
    <li><a href="#section3">3. Section</a></li>
</ul>

<b><span id="section1">1. Section</span></b><br />
First line in the section.<br />...<br />...<br />...<br />
Last line in the section.<br /><br />

<b><span id="section2">2. Section</span></b><br />
First line in the section.<br />...<br />...<br />...<br />
Last line in the section.<br /><br />

<b><span id="section3">3. Section</span></b><br />
First line in the section.<br />...<br />...<br />...<br />
Last line in the section.<br /><br />

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the id and the htmlFor attribute:

<form>
    <input type="checkbox" id="chBox" />
    <label for="chBox">You can change the checkbox state by clicking on this text</label>
</form>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example illustrates the use of the id property:

<head>
    <script type="text/javascript">
        function FindTagById () {
            var tag = document.getElementById ("sampleId");
            alert ("An element exists with the specified id: " + tag.id + ". The name of tag is: " + tag.tagName);
        }
    </script>
</head>
<body>
    <a id="sampleId">Anchor element with ID</a>
    <br />
    <button onclick="FindTagById ();">Find the anchor tag by id!</button>
</body>