Was sind benutzerdefinierte Attribute in HTML?

Unten finden Sie die Beschreibung der Syntax:

• Element: Dies könnte jedes HTML -Element sein, wie z

  ,

  , oder mehr.

• Daten-*: Dies ist ein benutzerdefiniertes Attribut, bei dem „*“ den Namen des Attributs darstellt.
• Wert: Dies kann jeder Zeichenfolgewert sein und muss in Kleinbuchstaben sein.

So erstellen Sie benutzerdefinierte Attribute in HTML?

Fügen Sie zunächst ein Div -Element mit dem Klassennamen hinzu “Hauptinhalt”In HTML. Fügen Sie eine HTML hinzu

Element für die Überschrift in dieses Divelelement. Um eine ungeordnete Liste zu erstellen, verwenden Sie die HTML

Schild. Geben Sie die Listenelemente an, indem Sie die enthalten
• Stichworte.

  Analysieren Sie den folgenden Code -Snippet, bei dem jeweils jeder

• Element ist den folgenden Attributen zugeordnet:
  • ONCLICK: Dies ist das Onclick -Ereignisattribut und funktioniert, wenn das Element geklickt wird.
  • Ausweis: Dieses Attribut legt eine eindeutige ID für die Elemente fest.
  • Datenqualität: Dies ist das benutzerdefinierte Attribut “,“Daten-”Gibt das Datenattribut an und“GradIst der Name des benutzerdefinierten Attributs.

  Der "ONCLICK”Attribut in jedem

• Element hat einen Wert “Showgrade (this)”, Was eine Funktion ist. Diese Funktion wird aufgerufen, während das Element geklickt wird. Das Keyword "Das”Wird verwendet, um sich auf ein Objekt zu beziehen. Der "AusweisDas Attribut legt für jeden eine eindeutige ID fest
• Element. Das Datenattribut “Datenqualität”Enthält verschiedene Werte.

  Hier ist das Code-Snippet, das das oben genannte Szenario darstellt:

  
  

  Testklassen

  
  
  
  
  • 
    Lisa
    
  
  
  • 
    Jack
    
  
  
  • 
    Gänseblümchen
    
  
  
  • 
    Jony
    
  
  
  
  

  Gehen wir nun zum JavaScript -Teil, um die im Onclick -Ereignisattribut angegebene Funktion zu manipulieren.

  JavaScript

  • Im obigen Code das “showDRADE ()"Funktion wird mit dem Parameter" Student "definiert.
  • Als nächstes erstellen Sie eine Variable “Grad”Und holen Sie sich den Attributwert, indem Sie die" verwenden "GetAttribute ()”.
  • Generieren Sie danach eine Warnmeldung für das Ergebnis.

  Ausgang
  

  Mithilfe der Dataset -Eigenschaft auf die benutzerdefinierten Attribute zugreifen?

  Verwenden Sie im selben HTML -Code das Schlüsselwort des Datensatzes und erwähnen Sie den benutzerdefinierten Attributnamen ohne Speicherplatz dazwischen. Zum Beispiel werden wir das benutzerdefinierte Attribut erwähnen “Data-Laptop-Typ”Und fügen Sie seinen Wert nach Bedarf hinzu:

  
  

  Programmiersprachen

  
  
  
  
  • 
    Frontendentwicklung
    
  
  
  • 
    Webserver machen
    
  
  
  • 
    Dynamisches und interaktives Web
    
  
  
  • 
    Entwickeln Sie Browser, Betriebssysteme
    
  
  
  
  

  JavaScript

  • Der "FunktionIst das Schlüsselwort, das vor der Funktion verwendet wird.
  • Im obigen Code das “showDRADE ()"Funktion wird mit dem Parameter definiert"Laptop”.
  • Als nächstes erstellen Sie eine Variable “laptoptype”Und holen Sie sich den benutzerdefinierten Attributwert, indem Sie die" verwenden "Laptop.Datensatz.laptoptype”.
  • Generieren Sie anschließend eine Warnung, um den abgerufenen Wert des entsprechenden benutzerdefinierten Attributs anzuzeigen.

  Ausgang
  

  So stylen Sie benutzerdefinierte Attribute in CSS?

  Wir können auch verschiedene CSS -Styling -Eigenschaften auf die benutzerdefinierten Attribute anwenden. Um auf das Datenattribut in CSS zuzugreifen, folgen Sie der Syntax:

  Element [Daten-*= 'Wert']
  CSS -Eigenschaften
  

  Ändern Sie nun den Hintergrund der einzelnen benutzerdefinierten Attribute mit der CSS-Eigenschaft von Hintergrundfarben.

  Stil „Data-Laptop-Typ“ mit Wert „HTML/CSS“:

  li [data-laptop-type = 'html/css']
  Hintergrundfarbe: RGB (199, 158, 240);
  

  Stil „Data-Laptop-Typ“ mit Wert „JavaScript“ mit Wert

  li [data-laptop-type = 'JavaScript']
  Hintergrundfarbe: RGB (158, 221, 240);
  

  Stil „Data-Laptop-Typ“ mit Wert „PHP“ mit Wert

  li [data-laptop-type = 'php']
  Hintergrundfarbe: RGB (250, 161, 243);
  

  Stil „Data-Laptop-Typ“ mit Wert "C ++"

  li [data-laptop-type = 'c ++']
  Hintergrundfarbe: RGB (212, 248, 154);
  

  Ausgang

  Bewegen wir uns weiter, um das Aussehen der HTML -Seite zu stylen.

  Stil „Hauptkontent“ div

  .Hauptinhalt
  Breite: 600px;
  Höhe: 300px;
  Rand: Auto;
  

  Der ".Hauptinhalt"Wird verwendet, um auf das DIV-Element mit der Klasse" Hauptkontent "zugreifen zu können. Die folgenden Eigenschaften werden darauf angewendet:

  • “BreiteEigenschaft legt die Breite des Elements fest.
  • “HöheEigenschaft legt die Höhe des Elements fest.
  • “RandEigenschaft fügt Platz um das Element um.

  Stil „Li“ Element

  .Hauptkontent li
  Schriftgröße: 25px;
  Rand: 2px;
  Polsterung: 5px;
  

  Der

• Element wird mit diesen Eigenschaften gestaltet:
  • “SchriftgrößeEigenschaft wird verwendet, um die Schriftgröße des Elements festzulegen.
  • “PolsterungDie Eigenschaft legt Platz um den Inhalt des Elements oder innerhalb des Randes des Elements.

  Stil H2 -Element

  H2
  Textdekoration: 5px überaus grün;
  

  Das H2 -Element wird mit dem angewendetTextdekorationEigentum mit dem "5px" Linienbreite, "überaus"Linienart und die Farbe"Grün”.

  Hier ist der letzte Blick auf unsere Webseite:

  Das ging nur darum, benutzerdefinierte Attribute in HTML zu erstellen und zu verwenden.

  Abschluss

  In HTML fügen benutzerdefinierte Attribute den HTML -Elementen zusätzliche Informationen hinzu, die mit dem Präfix angegeben sindDaten-" wie zum Beispiel "Datenqualität”. Der Benutzeragent ignoriert das Präfix “Daten-”. Es gibt verschiedene Methoden, um auf die benutzerdefinierten Attribute in JavaScript zuzugreifen, wie z. Diese Beschreibung hat eine umfassende Anleitung zum Erstellen, Zugriff auf, verwenden und stylen benutzerdefinierte Attribute in HTML.