Jakie są niestandardowe atrybuty w HTML?

Poniżej znajduje się opis składni:

• element: Może to być każdy element HTML, taki jak

  ,

  , albo więcej.

• dane-*: To jest niestandardowy atrybut, w którym „*” reprezentuje nazwę atrybutu.
• wartość: Może to być dowolna wartość ciągu i musi mieć małe litery.

Jak tworzyć niestandardowe atrybuty w HTML?

Najpierw dodaj element DIV z nazwą klasy „główna zawartość„W html. Dodaj HTML

element nagłówka w tym elemencie DIV. Następnie, aby stworzyć listę nieopisaną, skorzystaj z HTML

etykietka. Podaj pozycje listy, włączając
• tagi.

  Przeanalizuj poniższy fragment kodu, gdzie każdy

• Element jest powiązany z następującymi atrybutami:
  • na kliknięcie: To jest atrybut zdarzenia OnClick i działa po kliknięciu elementu.
  • ID: Ten atrybut ustawia unikalny identyfikator elementów.
  • Klasa danych: To jest niestandardowy atrybut, „dane-”Określa atrybut danych i„stopień”To nazwa niestandardowego atrybutu.

  „„na kliknięcie”Atrybut w każdym

• Element ma wartość „showgrade (to)”, Która jest funkcją. Ta funkcja jest wywoływana podczas klikania elementu. Słowo kluczowe „Ten”Jest wykorzystywany w odniesieniu do obiektu. „„ID”Atrybut ustawia unikalny identyfikator dla każdego
• element. Atrybut danych „Klasa danych”Zawiera różne wartości.

  Oto fragment kodu reprezentujący wyżej wymyślony scenariusz:

  
  

  Oceny testowe

  
  
  
  
  • 
    Lisa
    
  
  
  • 
    Jacek
    
  
  
  • 
    Stokrotka
    
  
  
  • 
    Jony
    
  
  
  
  

  Teraz przejdźmy do części JavaScript w celu manipulowania funkcją określoną w atrybucie zdarzenia onClick.

  JavaScript

  • W wyżej wymieniony kod „„showgrade ()„Funkcja jest zdefiniowana za pomocą parametru„ Student ”.
  • Następnie utwórz zmienną ”stopień”I uzyskaj wartość atrybutu, wykorzystując„getAttribute ()".
  • Następnie wygeneruj wiadomość ostrzegawczą dla wyniku.

  Wyjście
  

  Jak uzyskać dostęp do niestandardowych atrybutów za pomocą właściwości danych?

  W tym samym kodzie HTML użyj słowa kluczowego zestawu danych i wspomnij o niestandardowej nazwie atrybutu bez miejsca pomiędzy. Na przykład wspomniemy o niestandardowym atrybucie „typ laptopa danych”I dodaj swoją wartość zgodnie z wymaganiami:

  
  

  Języki programowania

  
  
  
  
  • 
    Rozwój frontu
    
  
  
  • 
    Tworzenie serwerów internetowych
    
  
  
  • 
    Dynamiczna i interaktywna sieć
    
  
  
  • 
    Opracuj przeglądarki, systemy operacyjne
    
  
  
  
  

  JavaScript

  • „„funkcjonować”Jest słowem kluczowym wykorzystanym przed funkcją.
  • W wyżej wymieniony kod „„showgrade ()”Funkcja jest zdefiniowana za pomocą parametru„laptop".
  • Następnie utwórz zmienną ”laptoptyp”I uzyskaj niestandardową wartość atrybutu, wykorzystując„laptop.Zestaw danych.laptoptyp".
  • Następnie wygeneruj alert, aby wyświetlić odzyskaną wartość odpowiedniego atrybutu niestandardowego.

  Wyjście
  

  Jak stylizować niestandardowe atrybuty w CSS?

  Możemy również zastosować różne właściwości stylizacji CSS do niestandardowych atrybutów. Aby uzyskać dostęp do atrybutu danych w CSS, postępuj zgodnie z składnią:

  element [dane-*= „wartość”]
  Właściwości CSS
  

  Teraz zmień tło każdego z niestandardowych atrybutów za pomocą właściwości CSS w kolorze tła.

  Styl „typ-laptop” o wartości „html/css”:

  li [data-laptop-typ = 'html/css']
  kolor tła: RGB (199, 158, 240);
  

  Styl „typ-laptop” o wartości „JavaScript”

  li [data-laptop-type = 'javascript']
  kolor tła: RGB (158, 221, 240);
  

  Styl „typ-laptop” o wartości „php”

  li [data-laptop-typ = 'php']
  kolor tła: RGB (250, 161, 243);
  

  Styl „typ-laptop” o wartości „C ++”

  li [data-laptop-typ = 'c ++']
  kolor tła: RGB (212, 248, 154);
  

  Wyjście

  Przejdźmy dalej, aby stylizować wygląd strony HTML.

  Styl „główny-content” div

  .główna zawartość
  szerokość: 600px;
  Wysokość: 300px;
  Margines: Auto;
  

  „„.główna zawartość”Jest wykorzystywany do dostępu do elementu DIV o klasie„ główny ”. Zastosowane są do niego następujące właściwości:

  • "szerokość„Właściwość ustawia szerokość elementu.
  • "wysokość„Właściwość ustawia wysokość elementu.
  • "margines„Właściwość dodaje przestrzeń wokół elementu.

  Element stylu „Li”

  .główny content li
  Rozmiar czcionki: 25px;
  Margines: 2px;
  Wyściółka: 5px;
  

• Element jest stylizowany z tymi właściwościami:
  • "rozmiar czcionki„Właściwość jest wykorzystywana do ustawiania wielkości czcionki elementu.
  • "wyściółka„Właściwość ustawia przestrzeń wokół zawartości elementu lub wewnątrz granicy elementu.

  Styl Element H2

  H2
  Dekoracja tekstu: 5px Overline Green;
  

  Element H2 jest stosowany z „dekoracja tekstu„Nieruchomość z„5px" szerokość linii, "Overline„Typ linii i kolor”zielony".

  Oto ostateczne spojrzenie na naszą stronę internetową:

  Chodziło o tworzenie i używanie niestandardowych atrybutów w HTML.

  Wniosek

  W HTML atrybuty niestandardowe dodają dodatkowe informacje do elementów HTML, określone z prefiksem „dane-" Jak na przykład "Klasa danych". Agent użytkownika ignoruje prefiks „dane-". Istnieje kilka metod dostępu do niestandardowych atrybutów w JavaScript, takich jak getAttribute (), setAttribute (), zestaw danych i wiele innych. Ten zapis zawierał kompleksowy przewodnik dotyczący tworzenia, dostępu, używania i stylizacji niestandardowych atrybutów w HTML.