Korzystanie z ID

Atrybut id w HTML jest unikalnym identyfikatorem, który może być przypisany do dowolnego elementu HTML. Jest to niezwykle przydatne narzędzie, które umożliwia stylizowanie elementów za pomocą CSS, manipulowanie nimi w JavaScript, a także tworzenie bardziej dostępnych stron internetowych. W tej lekcji przyjrzymy się, jak korzystać z atrybutu id w praktyce, analizując jego zastosowanie w różnych kontekstach.

Przykład użycia ID w HTML

Poniższy kod demonstruje podstawowe użycie atrybutu id w połączeniu z CSS i JavaScript. Struktura dokumentu HTML zawiera kilka elementów, do których przypisane są unikalne identyfikatory. Następnie, używając CSS, stylizujemy te elementy. W końcu, z pomocą JavaScript, dodajemy interaktywność, reagując na zdarzenia użytkownika.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Korzystanie z ID w HTML</title>
    <style>
        #unique-text {
            color: blue;
            font-size: 20px;
        }
        #interactive-button {
            padding: 10px 20px;
            background-color: green;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h3>Przykład tekstu z unikalnym ID</h3>
    <!-- Element z unikalnym ID -->
    <p id="unique-text">Ten tekst ma unikalne ID i został 
    ostylowany za pomocą CSS.</p>

    <h3>Interaktywny przycisk z użyciem ID</h3>
    <!-- Przycisk z unikalnym ID -->
    <button id="interactive-button">Kliknij mnie</button>

    <script>
        // Użycie JavaScript do dodania interaktywności
        const button = document.getElementById('interactive-button');
        button.addEventListener('click', function() {
            alert('Przycisk został kliknięty!');
        });
    </script>
</body>
</html>

Wyjaśnienie kodu

  • CSS: Używamy atrybutu id do ostylowania konkretnego tekstu i przycisku. Dzięki unikalności ID, stylizacja dotyczy tylko tych elementów, nawet jeśli na stronie znajdują się inne podobne elementy.
  • JavaScript: Przy pomocy getElementById(), odnosimy się do konkretnego elementu po jego ID, aby dodać do przycisku zdarzenie kliknięcia. To pokazuje, jak łatwo możemy manipulować elementami i dodawać interaktywność do strony internetowej.

Zastosowania ID

  • Stylizowanie: Umożliwia specyficzne stylizowanie elementów.
  • Manipulacja DOM: Ułatwia selekcjonowanie i manipulowanie elementami w JavaScript.
  • Nawigacja: Może być używane do tworzenia linków, które przewijają do określonych sekcji na stronie.

Podsumowanie

Atrybut id jest potężnym narzędziem w arsenale każdego twórcy stron internetowych. Jego unikalność na stronie umożliwia precyzyjne stylizowanie, efektywne manipulowanie elementami w JavaScript oraz tworzenie łatwych do nawigowania struktur dokumentów. Pamiętaj, aby używać ID z rozwagą, ponieważ nadmierne ich wykorzystanie może prowadzić do niepotrzebnie skomplikowanego kodu.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top