Vlad Merzhevich

W HTML 4 brakowało możliwości tworzenia własnych atrybutów do przechowywania wartości. Dlaczego jest to konieczne? Oto kilka zadań, które mogą być potrzebne.

  • Twórz podpowiedzi bez używania skryptów.
  • Określanie stylu elementu na podstawie wartości atrybutu.
  • Pozyskiwanie i zmiana wartości poprzez skrypty.

HTML5 ma nowy atrybut ogólny, który można dodać do dowolnego tagu. Zasady pisania atrybutu są proste:

  • zawsze zaczynaj od danych-;
  • używamy tylko liter łacińskich, łącznika (-), dwukropka (:) i podkreślenia (_).

CSS i JavaScript obsługują te atrybuty nieco inaczej, więc spójrzmy na ich przykłady osobno.

css

W CSS są atrybuty tagów, jeśli jest jakiś atrybut lub dana wartość, ustawiamy odpowiedni styl.

Zawartość

Teraz możemy odnieść się do tego elementu jako div w stylach i ustawić dla niego pożądany wygląd. Ogólnie rzecz biorąc, jest to podobne do działania klas, więc nie jest to jakaś unikalna lub niezbędna funkcja. Dlatego bardziej przydatne jest ustawianie wartości.

Zawartość

W CSS po tym możemy ustawić inny styl z różnymi wartościami naszego atrybutu data-colums.

div (szerokość: 480px; ) div (szerokość: 720px; )

Znowu jest to do pewnego stopnia zamiennik dla klas, nic nie stoi na przeszkodzie, aby tworzyć klasy o nazwach column-2, column-3 i dodawać je w razie potrzeby.

Bardziej eleganckim przypadkiem użycia jest włączenie funkcji attr(). Pobiera wartość danego atrybutu i wstawia go do stylu. Jest to przydatne przy tworzeniu podpowiedzi. Piszemy tekst bezpośrednio w elemencie, a wyświetlanie i projekt podpowiedzi realizujemy za pomocą CSS.

Etykietka

Temperatura wody

W ten przykład do żywiołu dodawany jest atrybut opis danych zawierający wymagany tekst do wyjścia. Samo wyświetlenie odbywa się za pomocą pseudoelementu ::after oraz właściwości content, której wartością jest funkcja attr().

JavaScript

Jeśli w CSS odwołujemy się bezpośrednio do nazwy atrybutu, określając ją w całości, to w JavaScript odbywa się to za pomocą metody dataset. Sama nazwa atrybutu jest konwertowana na zmienną zgodnie z następującymi regułami:

  • dane odrzucone;
  • każdy myślnik przed literą jest odrzucany, a następująca po nim litera jest pisana wielkimi literami.

W praktyce wygląda to tak.

opis danych staje się opisem.
pełny opis danych staje się pełnym opisem.
data-opis-tagu staje się descriptionOfTag.

Tradycyjnym sposobem uzyskania dostępu do elementu i jego atrybutów jest podanie identyfikatora i uzyskanie dostępu do elementu poprzez getElementById , jak pokazano w poniższym przykładzie.

zbiór danych

Użytkownik

Najpierw dodajemy do elementu identyfikator z unikalną wartością. Następnie uzyskujemy dostęp do elementu poprzez getElementById . Teraz możemy uzyskać dostęp do dowolnych atrybutów danych za pomocą metody dataset i nie tylko pobierać, ale także ustawiać wartości. Będą one przechowywane do momentu ponownego załadowania strony lub ustawienia nowej wartości.

Przed utworzeniem HTML5 pracuj z atrybutami w elementy HTML było, delikatnie mówiąc, nieprzyjemne. Trzeba było użyć atrybutów takich jak rel lub class . A niektórzy programiści stworzyli nawet własne atrybuty.

Ale sytuacja zmieniła się diametralnie, gdy HTML5 dał nam możliwość korzystania z jego atrybutów danych. Teraz zapisywanie dodatkowych danych za pomocą standardowych środków jest dość łatwe.

Jak działają atrybuty daty?

Nazwa mówi sama za siebie. Atrybuty daty przechowują określone dane. Zawsze zaczynają się od przedrostka data- i kończą czymś bardziej zrozumiałym dla dewelopera (w specyfikacji dozwolone są tylko małe litery i łączniki). Element może zawierać dowolną liczbę atrybutów daty.

Przykład wykorzystania atrybutów do przechowywania danych użytkownika:

  • Calvin

    • Oczywiście dane te nie pomagają zbytnio użytkownikowi końcowemu, ponieważ po prostu ich nie widzi, ale atrybuty daty są bardzo szeroko stosowane w nowoczesna sieć technologie.

    Oto przykład przycisku do usuwania czegoś ze swojej strony:

    Wszystkie niezbędne parametry są na wyciągnięcie ręki i gotowe do wysłania do skryptu zaplecza. Nigdy więcej atrybutów rel lub obsługi identyfikatorów lub wymaganych działań z innych atrybutów.

    Co można przechowywać?

    Warto pamiętać tylko o jednej regule, nie można przechowywać obiektów w atrybutach danych. Oznacza to, że jest to możliwe, jeśli są wstępnie zserializowane. Na razie pamiętaj tylko, że w zasadzie możesz przechowywać tylko dane łańcuchowe.

    Czytanie/zapisywanie atrybutów za pomocą javascript

    Wróćmy do przykładu przycisku i zobaczmy, jak możemy uzyskać dostęp do wymaganych atrybutów.

    // To jest przycisk var button = document.getElementById("identyfikator-twojego-przycisku"); // Pobierz wartość var ​​cmd = button.getAttribute("data-cmd"); var id = button.getAttribute("identyfikator-danych"); // Zmień przycisk wartości setAttribute("data-cmd", yourNewCmd); button.setAttribute("identyfikator danych", twójNowyId);

    Całkiem proste, prawda? Teraz po prostu przekaż parametry cmd i id do swojej aplikacji i wykonaj niezbędne żądanie ajax.

    Odczyt/zapis atrybutów daty za pomocą jQuery.

    Oto odpowiednik jQuery:

    // Pobierz wartość var ​​cmd = $("#identyfikator-twojego-przycisku").attr("data-cmd"); var id = $("#identyfikator-twojego-przycisku").attr("identyfikator-danych"); // Zmień wartość $("#your-button-id") .attr("data-cmd", yourNewCmd) .attr("data-id", yourNewId);

    Nie myl z metodą data(). Chociaż mają ze sobą coś wspólnego, generalnie są to zupełnie inne rzeczy. Nawet jeśli nie jesteś w pełni zaznajomiony z tymi metodami, po prostu użyj attr() .

    Korzystanie z interfejsu API zbioru danych

    HTML5 oferuje nam nawet API do pracy z atrybutami danych, chociaż IE10 i poniżej go nie obsługują.

    Znowu przykład przycisku, ale tym razem przy użyciu interfejsu API zestawu danych:

    // To jest przycisk var button = document.getElementById("identyfikator-twojego-przycisku"); // Pobierz wartość var ​​cmd = button.dataset.cmd; id zmiennej = button.dataset.id; // Zmień wartość button.dataset.cmd = yourNewCmd; button.dataset.id = twójNowyId;

    Zwróć uwagę na brak prefiksu danych i myślników. Podobnie jak podczas pracy z właściwościami CSS w JavaScript, musisz używać wielkości liter garbus. Interfejs Dataset API tłumaczy nazwy atrybutów w taki sposób, że data-some-attribute-name w HTML staje się dataset.someAttributeName w JavaScript.

    Co można zrobić z atrybutami daty

    Podane przykłady to tylko podstawa. Za pomocą atrybutów daty można wykonywać znacznie bardziej złożone operacje. Spójrzmy na kilka przykładów.

    Filtrowanie

    Załóżmy, że pracujesz z listą elementów i musisz je filtrować według słowa kluczowego. Poczta słowa kluczowe w atrybutach danych i użyj małego, iteracyjnego skryptu, aby je przetworzyć.

    • Bród
    • Chevrolet
      • ...

    Przykład „na kolanie”:

    $("#filter").on("keyup", function() ( var słowo kluczowe = $(this).val().toLowerCase(); $(.cars > li").each(function() ( $(this).toggle(keyword.length< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );

    Stylizacja

    Oczywiście style najlepiej stosować poprzez klasy, ale to samo można zrobić za pomocą atrybutów danych. W ten sposób stosujesz styl do elementów, które mają określony atrybut danych, niezależnie od jego wartości. Przyjrzyjmy się najpierw HTMLowi:

    A teraz CSS:

    ( tło: czerwone; )

    Ale jak wziąć pod uwagę wartość atrybutu? W ten sposób możesz stylizować wszystkie elementy za pomocą atrybutu ostrzeżenia o danych, którego wartość zawiera słowo error:

    ( kolor czerwony; )

    Ustawienie

    Słynny framework Bootstrap wykorzystuje atrybuty danych do dostosowywania swoich wtyczek JavaScript. Przykład wyskakującego okienka:

    Najlepszy sposób na przechowywanie danych

    Atrybuty daty są bardzo powszechne w technologiach internetowych. Ale najważniejsze jest to, że są one w pełni obsługiwane przez starsze przeglądarki i coraz głębiej zagłębiają się w standardy sieciowe. A skoro standard HTML został już zatwierdzony, to można z nimi pracować już dziś i nie bać się, że jutro nagle znikną.