attr()

Обновлено: 31.05.2022

attr()

Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.

Синтаксис

attr(<атрибут> <тип>? [, <значение>]?)

Значения

<атрибут> Имя атрибута элемента передаваемое в CSS.
<тип> Тип значения свойства CSS. Допустимы следующие ключевые слова: string (строки), color (цвет), url (веб-адрес), integer (целое число), number (вещественное число), angle (угол), time (время), deg (градус), а также единицы CSS вроде em, px и др.
<значение> Значение, которое будет использоваться в том случае, если атрибута нет или браузер не может его получить.

Между версиями CSS есть небольшая разница по прочтению некоторых особенностей attr(). В CSS2.1 функция attr() может использоваться только совместно со свойством content и всегда возвращает строку в качестве значения. В CSS3 attr() допустимо применять с любым свойством и возвращаемое значение может быть в любом корректном для CSS3 формате.

Пример

В данном примере после ссылок с классом site в скобках выводится значение атрибута href, к которому применяется стилевое оформление.

Браузеры

attr

Посмотреть совместимость на Can I use?

attr