Функция 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 формате.
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
.site::after {
content: ' (' attr(href) ') ';
background: rgba(22, 137, 213, 0.542);
color: rgb(255, 0, 0);
}
</style>
<p><a href='https://gki-webik.ru' class='site'>Полезный сайт</a></p>
</body>
</html>Читайте также
Стиль для переключателей в неопределённом состоянии
Псевдокласс :indeterminate задаёт стиль для переключателей, когда они находятся в неопределённом состоянии. К примеру, если ни один переключатель не п...
Свойство text-decoration-style
Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line....
Свойство transform
Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций, перечисляя ...
Свойство font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.
Список шрифтов может включать одно или нескольк...