Функция 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>
Читайте также
Функция var()
Функция <span class='samp'>var()</span> позволяет вставлять значения п...
Стили поля с неверными значениями, выходящими из заданного диапазона
Применяется к полям форм, у которых введённое пользователем значение выходит из заданного диапазо...
Свойство grid-auto-columns
Определяет размер любых автоматически созданных треков. Неявные треки создаются при явном позицио...
Свойство flex
Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял ...
Свойство background-image
Задает фоновое изображение элемента. В качестве значения указывается путь к изображению. Он может...