✔Функция attr()

23 марта 2016 4 270 Справочник CSS 3

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	2.0+	9.0+	3.1+	1.0+	1.0+	1.0+

Краткая информация

Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/css3-values/#attr

Версии 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, к которому применяется стилевое оформление.

Цитирование статьи, картинки - фото скриншот - Rambler News Service.

Иллюстрация к статье - Яндекс. Картинки.

Есть вопросы. Напишите нам.

Общие правила поведения на сайте.

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 CSS3 Значения имя_атрибута Имя атрибута элемента передаваемое в CSS. Тип значения свойства CSS. Допустимы следующие ключевые слова: string (строки), color (цвет), url (веб-адрес), integer (целое число), number (вещественное число), angle (угол), time (время), deg (градус), а также единицы CSS вроде em, px и др. Значение, которое будет использоваться в том случае, если атрибута нет или браузер не может его получить. Между версиями CSS есть небольшая разница по прочтению некоторых особенностей attr(). В CSS2.1 функция attr() может использоваться только совместно со свойством content и всегда возвращает строку в качестве значения. В CSS3 attr() допустимо применять с любым свойством и возвращаемое значение может быть в любом корректном для CSS3 формате. Пример HTML5 CSS3 IE Cr Op Sa Fx В данном примере после ссылок с классом site в скобках выводится значение атрибута href, к которому применяется стилевое оформление.

запостил(а)

Administrator

Вернуться назад

-2