Atrybut id HTML

HTML id Atrybut służy do określenia unikalnego id elementu HTML.

W jednym dokumencie HTML nie może istnieć więcej niż jeden element o tym samym id.

Użycie atrybutu id

id Atrybut określa unikalny ID elementu HTML. id Wartość atrybutu musi być unikalna w dokumencie HTML.

id Atrybuty służą do wskazywania konkretnych deklaracji stylu w arkuszu stylów. JavaScript może również używać go do dostępu i operacji na elementach o konkretnym ID.

Gramatyka id polega na napisaniu znaku #, po którym następuje nazwa id, a następnie w nawiasach kwadratowych {} definiuje się atrybuty CSS.

poniżej}} <h1> który wskazuje na nazwę id "myHeader". W poniższym przykładzie mamy <h1> Elementy będą się kierować na podstawie elementu #myHeader Definicje stylów są używane do ustawiania stylów:

Przykład

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">Moje Nagłówek</h1>
</body>
</html>

Spróbuj sam

Uwaga:Nazwy id są wrażliwe na wielkość liter!

Uwaga:id musi zawierać co najmniej jeden znak i nie może zawierać białych znaków (spacji, tabulatorów itp.).

Różnica między klasą a ID

Te same nazwy klas mogą być używane przez wiele HTML elementów, podczas gdy nazwa id może być używana tylko przez jeden element HTML na stronie:

Przykład

<style>
/* Ustawienia stylu dla elementu o id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Ustawienia stylu dla wszystkich elementów o klasie "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Elementy o unikalnym id -->
<h1 id="myHeader">Moje Miasta</h1>
<!-- Elementy o tych samych klasach -->
<h2 class="city">London</h2>
<p>London jest stolicą Anglii.</p>
<h2 class="city">Paris</h2>
<p>Paris jest stolicą Francji.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo jest stolicą Japonii.</p>

Spróbuj sam

Wskazówka:Proszę, odwiedź nasz Kurs CSS naucz się więcej o CSS.

Zakładki HTML realizowane przez ID i linki

Zakładki HTML pozwalają czytelnikom przenieść się do określonej części strony.

Jeśli strona jest długa, zakładki mogą być bardzo przydatne.

Aby użyć zakładki, musisz najpierw ją utworzyć, a następnie dodać do niej link.

Następnie, gdy klikniesz na link, strona przesunie się do miejsca z zakładką.

Przykład

Najpierw, użyj id Atrybuty tworzą zakładki:

<h2 id="C4">Czwarty rozdział</h2>

Następnie, na tej samej stronie, dodaj link do tej zakładki („Przejdź do czwartego rozdziału”):

Przykład

<a href="#C4">Przejdź do czwartego rozdziału</a>

Spróbuj sam

Albo, na innej stronie, dodaj link do tej zakładki („Przejdź do czwartego rozdziału”):

<a href="html_demo.html#C4">Przejdź do rozdziału 4</a>

Użycie atrybutu id w JavaScript

JavaScript może również używać atrybutu id do wykonywania pewnych zadań dla określonych elementów.

JavaScript może używać getElementById() Metoda dostępu do elementu o określonym id:

Przykład

Używaj atrybutu id do przetwarzania tekstu za pomocą JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Spróbuj sam

Wskazówka:Proszę, JavaScript HTML W tym rozdziale, lub naszych Kurs JavaScript naucz się JavaScript.

Podsumowanie rozdziału

  • id Atrybuty są używane do określenia unikalnego id dla elementów HTML
  • id Wartości atrybutów muszą być unikalne w dokumencie HTML
  • CSS i JavaScript mogą używać id Atrybuty do wybierania elementów lub ustawiania stylu dla określonych elementów
  • id Wartości atrybutu są rozróżniane przez wielkość liter
  • id Atrybuty mogą być również używane do tworzenia zakładek HTML
  • JavaScript może używać getElementById() Metoda dostępu do elementu o określonym id