| Internet Explorer |
Chrome |
Opera |
Safari |
Firefox |
Android |
iOS |
| 8.0+ |
2.0+ |
9.0+ |
3.1+ |
1.0+ |
1.0+ |
1.0+ |
Краткая информация
Версии CSS
| CSS 1 |
CSS 2 |
CSS 2.1 |
CSS 3 |
|
|
|
|
Описание
Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.
Синтаксис
| CSS2.1 |
attr(имя_атрибута)
|
| CSS3 |
attr(имя_атрибута, <тип>, <значение>)
|
Значения
- имя_атрибута
Имя атрибута элемента передаваемое в CSS. - <тип>
- Тип значения свойства CSS. Допустимы следующие ключевые слова: string (строки), color (цвет), url (веб-адрес), integer (целое число), number (вещественное число), angle (угол), time (время), deg (градус), а также единицы CSS вроде em, px и др.
- <значение>
- Значение, которое будет использоваться в том случае, если атрибута нет или браузер не может его получить.
Между версиями CSS есть небольшая разница по прочтению некоторых особенностей attr(). В CSS2.1 функция attr() может использоваться только совместно со свойством content и всегда возвращает строку в качестве значения. В CSS3 attr() допустимо применять с любым свойством и возвращаемое значение может быть в любом корректном для CSS3 формате.
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>attr()</title>
<style>
.site::after {
content: ' (' attr(href) ') '; /* Выводим адрес ссылки в скобках */
font-size: 0.8em; /* Уменьшаем текст*/
background: yellow; /* Жёлтый фон */
}
</style>
</head>
<body>
<p><a href="http://htmlbook.ru" class="site">Полезный сайт</a></p>
</body>
</html>
В данном примере после ссылок с классом site в скобках выводится значение атрибута href, к которому применяется стилевое оформление.
Перейти обратно к новости
|