Globale Attribute

8.1 Attribut id

Globale Attribute sind Attribute, die mit jedem HTML-Element verwendet werden können. Sie spielen eine Schlüsselrolle bei der Identifikation, Klassifizierung und Verwaltung von Webseiten-Elementen.

Das Attribut id wird verwendet, um ein Element auf der Seite eindeutig zu identifizieren. Der Wert des Attributs id muss innerhalb des gesamten HTML-Dokuments einzigartig sein. Dieses Attribut wird häufig zur Verbindung mit CSS- und JavaScript-Elementen verwendet.

Syntax:

    
      <element id="unique-id">...</element>
    
  

Beispiel für die Verwendung:

    
      #header {
        background-color: #f4f4f4;
        padding: 10px;
      }
    
  

    
      <div id="header">
        <h1>Kopfzeile</h1>
      </div>
    
  

    
      document.getElementById('header').style.color = 'blue';
    
  

Vorteile:

• Eindeutige Identifikation: ermöglicht es, Elemente auf der Seite eindeutig zu identifizieren
• Styling: praktisch für die Anwendung von CSS-Stilen
• DOM-Manipulationen: bietet einfachen Zugriff auf Elemente mit JavaScript

8.2 Attribut class

Das Attribut class wird verwendet, um einem Element eine oder mehrere Klassen zuzuweisen. Diese Klassen können zur Anwendung von CSS-Stilen und zur Manipulation von Elementen mit JavaScript verwendet werden. Im Gegensatz zu id müssen class-Werte nicht einzigartig sein.

Syntax:

    
      <element class="class-1 class-2">...</element>
    
  

Beispiel für die Verwendung:

    
      .highlight {
        background-color: yellow;
      }

      .bold {
        font-weight: bold;
      }
    
  

    
      <p class="highlight">Dieser Text ist gelb markiert.</p>
      <p class="bold">Dieser Text ist fett.</p>
      <p class="highlight bold">Dieser Text ist fett und gelb markiert.</p>
    
  

Vorteile:

• Mehrere Klassen: ermöglicht es, einem Element mehrere Klassen zuzuweisen
• Gruppierung von Elementen: erleichtert die Anwendung von Stilen auf Gruppen von Elementen
• DOM-Manipulationen: ermöglicht einfache Arbeit mit Gruppen von Elementen über JavaScript

8.3 Attribute data-*

Die Attribute data-* ermöglichen es, benutzerdefinierte Daten in HTML-Elementen zu speichern. Diese Attribute beginnen mit dem Präfix data- und können jeden beliebigen Wert haben. Sie werden häufig zum Speichern von Informationen verwendet, die für JavaScript nützlich sein können.

Syntax:

    
      <element data-key="value">...</element>
    
  

Beispiel für die Verwendung:

    
      <div data-user-id="12345" data-role="admin">
        Benutzer mit ID 12345, Rolle - Administrator.
      </div>
    
  

    
// Finde das erste Element auf der Seite, das das Attribut data-user-id hat
const userElement = document.querySelector('[data-user-id]');

// Hole den Wert des Attributs data-user-id und gib ihn in der Konsole aus
console.log(userElement.dataset.userId); // Ausgabe: 12345

// Hole den Wert des Attributs data-role und gib ihn in der Konsole aus
console.log(userElement.dataset.role); // Ausgabe: admin
    
  

Vorteile:

• Datenspeicherung: praktisch zum Speichern und Übertragen von Daten, die mit Elementen verknüpft sind
• Zugriff über JavaScript: einfacher Zugriff und Änderung von Daten über das dataset API
• Flexibilität: ermöglicht das Hinzufügen beliebiger Daten, ohne den HTML-Standard zu verletzen