- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to specify a unique id for an element in HTML?
For each HTML element, the id attribute specifies a special id. The id attribute's value must be distinct across the HTML content. A specific style declaration in a style sheet is referenced using the id attribute. JavaScript also uses it to access and modify the element with the given id.
Following are the examples…
Example
In the following example we are using <h1> pointing to id name ”tutorial”. This <h1> will get styled according to the #tutorial.
<!DOCTYPE html> <html> <head> <style> #tutorial { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id="tutorial">Welcome Everyone..</h1> </body> </html>
Output
On executing the above script, the element with id "tutorial" will get styled according to the #tutorial.
Example: Using Javascript
Javascript uses the unique id and manipulates the element with given id.
<!DOCTYPE HTML> <html> <body> <h1 id="tutorial">Hello</h1> <button onclick="displayResult()">change text</button> <script> function displayResult() { document.getElementById("tutorial").innerHTML = "WELCOME"; } </script> </body> </html>
Output
When you try to execute the script at first, it will display the text "hello".
On clicking the change text button, the text "hello" will be changed to "welcome".
- Related Articles
- How to add a unique id for an element in HTML?
- How to specify the type of box used for an HTML element using CSS?
- How to specify that an element is not yet relevant in HTML?
- How to create a unique ID for each object in JavaScript?
- How to specify that the element is read-only in HTML?
- How to specify which form element a calculation is bound to with HTML?
- How to specify whether the content of an element should be translated or not in HTML?
- How to specify that an element should be pre-selected when the page loads in HTML?
- Does ID have to be unique in the whole HTML page?
- How to specify the usage of an element using the tabbing order (tab keyboard button) in HTML?
- How to refer to a element that contains pre-defined options for an element in HTML?
- How to specify a minimum value in HTML?
- How to specify the language of the element's content in HTML?
- How to specify citation in HTML?
- How to specify the number of visible options for in HTML?
