8.1 Atrybut id
Atrybuty globalne to atrybuty, które mogą być używane z dowolnym elementem HTML. Odgrywają kluczową rolę w identyfikacji, klasyfikacji i zarządzaniu elementami stron internetowych.
Atrybut id służy do unikalnej identyfikacji elementu na stronie. Wartość atrybutu id musi być unikalna w całym dokumencie HTML. Ten atrybut jest często używany do łączenia z elementami CSS i JavaScript.
Składnia:
<element id="unique-id">...</element>
Przykład użycia:
#header {
background-color: #f4f4f4;
padding: 10px;
}
<div id="header">
<h1>Nagłówek</h1>
</div>
document.getElementById('header').style.color = 'blue';
Zalety:
- Unikalna identyfikacja: pozwala jednoznacznie identyfikować elementy na stronie
- Stylizacja: wygodny do stosowania stylów CSS
- Manipulacje DOM: łatwy dostęp do elementów za pomocą JavaScript
8.2 Atrybut class
Atrybut class służy do przypisywania jednego lub kilku klas elementowi. Te klasy mogą być używane do stosowania stylów CSS i do manipulacji elementami za pomocą JavaScript. W przeciwieństwie do id, wartości class nie muszą być unikalne.
Składnia:
<element class="class-1 class-2">...</element>
Przykład użycia:
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
<p class="highlight">Ten tekst jest podświetlony na żółto.</p>
<p class="bold">Ten tekst jest pogrubiony.</p>
<p class="highlight bold">Ten tekst jest pogrubiony i podświetlony na żółto.</p>
Zalety:
- Wiele klas: pozwala na przypisywanie kilku klas do jednego elementu
- Grupowanie elementów: łatwo stosować style do grup elementów
- Manipulacje DOM: pozwala łatwo pracować z grupami elementów poprzez JavaScript
8.3 Atrybuty data-*
Atrybuty data-* pozwalają przechowywać niestandardowe dane w elementach HTML. Te atrybuty zaczynają się od prefiksu data- i mogą mieć dowolną wartość. Często są stosowane do przechowywania informacji, które mogą być użyteczne dla JavaScript.
Składnia:
<element data-key="value">...</element>
Przykład użycia:
<div data-user-id="12345" data-role="admin">
Użytkownik z ID 12345, rola - administrator.
</div>
// Znajdź pierwszy element na stronie, który ma atrybut data-user-id
const userElement = document.querySelector('[data-user-id]');
// Pobierz wartość atrybutu data-user-id i wypisz ją w konsoli
console.log(userElement.dataset.userId); // Wypisuje: 12345
// Pobierz wartość atrybutu data-role i wypisz ją w konsoli
console.log(userElement.dataset.role); // Wypisuje: admin
Zalety:
- Przechowywanie danych: wygodne do przechowywania i przekazywania danych związanych z elementami
- Dostęp przez JavaScript: łatwy dostęp i zmiana danych przez dataset API
- Elastyczność: pozwala dodawać dowolne dane bez naruszania standardu HTML
GO TO FULL VERSION