Atrybut id HTML

Definicja i użycie

id Atrybut określa unikalny id elementu HTML (ta wartość musi być unikalna w dokumencie HTML).

id Atrybut jest najczęściej używany do odniesienia się do stylów w arkuszu stylów oraz do operowania na elementach o określonym id za pomocą JavaScript (przez HTML DOM).

id Atrybut może również być używany jako link anchor (link kotwica).

Zobacz również:

Kurs HTML:HTML id

Kurs HTML:Atrybuty HTML

Kurs CSS:Gramatyka CSS

Podręcznik CSS:CSS #id Wybieracz

Podręcznik HTML DOM:Metoda getElementById() w HTML DOM

Podręcznik HTML DOM:Atrybut id w HTML DOM

Podręcznik HTML DOM:Obiekt Style DOM HTML

Przykład

Przykład 1

Użyj atrybutu id do zmiany tekstu za pomocą JavaScript:

<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Zmień tekst</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>

Spróbuj sam

Więcej przykładów znajduje się na dole strony.

Gramatyka

<element id="id">

Wartość atrybutu

Wartość Opis
id

Przypisz unikalny id do elementu. Reguły nazewnictwa:

  • Musisz zawierać co najmniej jeden znak
  • Nie może zawierać żadnych znaków spacji

Więcej przykładów

Przykład 2

Użyj atrybutu id, aby linkować do elementu wewnątrz strony o określonym id:

<html>
<body>
<h2><a id="top">Tytuł</a></h2>
<p>Wiele, wiele tekstu ....</p>
<p>Wiele, wiele tekstu ....</p>
<p>Wiele, wiele tekstu ....</p>
<a href="#top">Wróć do góry</a>
</body>
</html>

Spróbuj sam

Przykład 3

Użyj atrybutu id do stylizacji tekstu za pomocą CSS:

<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">CodeW3C.com to najlepsze!</h1>
</body>
</html>

Spróbuj sam

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie