Atrybut identyfikatora HTML
Atrybut HTML idsłuży do określenia unikalnego identyfikatora elementu HTML.
Nie możesz mieć więcej niż jednego elementu o tym samym identyfikatorze w dokumencie HTML.
Korzystanie z atrybutu id
idAtrybut określa unikalny identyfikator elementu HTML . Wartość id
atrybutu musi być unikalna w dokumencie HTML.
Atrybut jest idużywany do wskazania określonej deklaracji stylu w arkuszu stylów. Jest również używany przez JavaScript do uzyskiwania dostępu do elementu o określonym identyfikatorze i manipulowania nim.
Składnia identyfikatora to: wpisz znak krzyża (#), po którym następuje nazwa identyfikatora. Następnie zdefiniuj właściwości CSS w nawiasach klamrowych {}.
W poniższym przykładzie mamy <h1>element, który wskazuje na nazwę identyfikatora „myHeader”. Ten <h1>
element będzie stylizowany zgodnie z #myHeader
definicją stylu w sekcji head:
Przykład
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My
Header</h1>
</body>
</html>
Uwaga: w nazwie identyfikatora rozróżniana jest wielkość liter!
Uwaga: nazwa identyfikatora musi zawierać co najmniej jeden znak, nie może zaczynać się od cyfry i nie może zawierać spacji (spacji, tabulatorów itp.).
Różnica między klasą a identyfikatorem
Nazwa klasy może być używana przez wiele elementów HTML, podczas gdy nazwa identyfikatora może być używana tylko przez jeden element HTML na stronie:
Przykład
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Wskazówka: Więcej informacji o CSS znajdziesz w naszym samouczku CSS .
Zakładki HTML z identyfikatorem i linkami
Zakładki HTML umożliwiają czytelnikom przechodzenie do określonych części strony internetowej.
Zakładki mogą być przydatne, jeśli Twoja strona jest bardzo długa.
Aby skorzystać z zakładki, musisz ją najpierw utworzyć, a następnie dodać do niej link.
Następnie po kliknięciu łącza strona przewinie się do lokalizacji z zakładką.
Przykład
Najpierw utwórz zakładkę z idatrybutem:
<h2 id="C4">Chapter 4</h2>
Następnie dodaj link do zakładki („Przejdź do rozdziału 4”) z poziomu tej samej strony:
Przykład
<a href="#C4">Jump to Chapter 4</a>
Lub dodaj łącze do zakładki („Przejdź do rozdziału 4”) z innej strony:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Używanie atrybutu id w JavaScript
idAtrybut może być również używany przez JavaScript do wykonywania niektórych zadań dla tego konkretnego elementu .
JavaScript może uzyskać dostęp do elementu o określonym identyfikatorze za pomocą getElementById()metody:
Przykład
Użyj idatrybutu, aby manipulować tekstem za pomocą JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Wskazówka: zapoznaj się z JavaScriptem w rozdziale HTML JavaScript lub w naszym samouczku JavaScript .
Podsumowanie rozdziału
- Atrybut służy do
idokreślenia unikalnego identyfikatora elementu HTML - Wartość
idatrybutu musi być unikalna w dokumencie HTML - Atrybut jest
idużywany przez CSS i JavaScript do stylizacji/wyboru określonego elementu - W wartości
idatrybutu rozróżniana jest wielkość liter idAtrybut służy również do tworzenia zakładek HTML- JavaScript może uzyskać dostęp do elementu o określonym identyfikatorze za pomocą
getElementById()metody