Funkcja CSS attr()

Funkcja CSS attr() zwraca wartość określonego atrybutu wybranego elementu.

Wartości i składnia funkcji attr()

Funkcja attr() przyjmuje następujące parametry:

Nazwa atrybutu

Nazwa atrybutu, którego wartość ma zostać pobrana z wybranego elementu HTML.

Typ atrybutu

Określa sposób interpretacji wartości atrybutu jako wartości CSS. Może to być słowo kluczowe string, funkcja type() lub jednostka miary CSS . Wartością domyślną jest string.

Funkcja type() przyjmuje jeden z następujących argumentów określających typ wartości CSS lub ich kombinację: <angle>, <color>, <custom-ident>, <image>, <integer>, <length>, <length-percentage>, <number>, <percentage>, <resolution>, <string>, <time>, <transform-function>.

W przypadku użycia kombinacji typów w funkcji type(), poszczególne parametry należy rozdzielić pionową kreską, np.:

attr(class type(<string> | <custom-ident>));

Wartość awaryjna

Wartość, która zostanie użyta w przypadku, gdy określony atrybut nie istnieje lub zawiera nieprawidłową wartość.

Przykład

W poniższym przykładzie funkcja attr() zwraca wartość atrybutu href elementu a i wartość ta zostaje wstawiona w nawiasie, za elementem a.

a:after {
  content: " (" attr(href) ")";
}

Podsumowanie