Atributul HTML id
Atributul id setează un id unic pentru un element HTML. Nu poți avea două elemente cu același id într-un document.
Atributul id
Atributul id oferă unui element un id unic, care trebuie să fie unic în document. Indică un stil specific dintr-o foaie de stil, iar JavaScript îl folosește pentru a accesa și modifica acel element. Pentru a scrie CSS-ul, folosește un diez (#) urmat de numele id-ului, apoi proprietățile în acolade.
Notă: Numele id-ului este sensibil la majuscule. Notă: Trebuie să aibă cel puțin un caracter, nu poate începe cu o cifră și nu poate conține spații.
Exemplu
Un <h1> stilizat prin id-ul său.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">Titlul Meu</h1>
</body>
</html>
Diferența Dintre Class și ID
Un nume de clasă poate fi folosit de mai multe elemente, dar un id trebuie folosit doar de un singur element de pe pagină.
Exemplu
Un id unic alături de o clasă partajată.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Stilizează elementul cu id-ul "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Stilizează toate elementele cu numele de clasă "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h1 id="myHeader">Orașele Mele</h1>
<h2 class="city">Londra</h2>
<p>Londra este capitala Angliei.</p>
<h2 class="city">Paris</h2>
<p>Parisul este capitala Franței.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo este capitala Japoniei.</p>
</body>
</html>
Favorite HTML cu ID și Linkuri
Favoritele (bookmark-urile) le permit cititorilor să sară la o parte specifică a unei pagini, ceea ce este util pe o pagină lungă. Mai întâi creezi favoritul dându-i unui element un id, apoi adaugi un link către el cu href="#id". Când linkul este apăsat, pagina derulează la acel element. Poți lega și un favorit dintr-o altă pagină, punând numele fișierului înaintea semnului #.
Exemplu
Un link care sare la Capitolul 4 pe aceeași pagină.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Salt la Semn de Carte</title>
</head>
<body>
<p><a href="#C4">Sari la Capitolul 4</a></p>
<h2>Capitolul 1</h2>
<p>Acest capitol explică ba bla bla</p>
<h2>Capitolul 2</h2>
<p>Acest capitol explică ba bla bla</p>
<h2>Capitolul 3</h2>
<p>Acest capitol explică ba bla bla</p>
<h2 id="C4">Capitolul 4</h2>
<p>Acest capitol explică ba bla bla</p>
<h2>Capitolul 5</h2>
<p>Acest capitol explică ba bla bla</p>
</body>
</html>
Favorit pe altă pagină
Legarea către un favorit dintr-o pagină diferită.
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Folosirea Atributului id în JavaScript
JavaScript poate folosi id-ul pentru a lucra cu acel element specific. Metoda getElementById() găsește elementul cu un id dat.
Exemplu
Un buton care schimbă textul unui titlu cu JavaScript.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 id="myHeader">Salut, lume!</h1>
<button onclick="displayResult()">Schimbă textul</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "O zi bună!";
}
</script>
</body>
</html>
Rezumatul Capitolului
Pe scurt: atributul id setează un id unic pentru un element, iar valoarea trebuie să fie unică în document. CSS și JavaScript îl folosesc pentru a stiliza sau selecta un anumit element, valoarea este sensibilă la majuscule și este de asemenea folosită pentru a crea favorite. JavaScript poate accesa elementul cu getElementById().