Css get attribute value

attr()

Примечание. Функция attr() может использоваться с любым свойством CSS, но поддержка свойств, отличных от content является экспериментальной, а поддержка параметра type-or-unit является разреженной.

attr() CSS — функция используется для получения значения атрибута выбранного элемента и использовать его в таблице стилей. Его также можно использовать с псевдоэлементами , и в этом случае возвращается значение атрибута исходного элемента псевдоэлемента.

/ * Простое использование * / attr(data-count); attr(title); / * С типом * / attr(src url); attr(data-count number); attr(data-width px); / * С резервным * / attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default");

Syntax

Values

Имя атрибута элемента HTML,на который ссылается CSS.

Ключевое слово, представляющее либо тип значения атрибута, либо его единицу, поскольку в HTML некоторые атрибуты имеют неявные единицы. Если использование в качестве значения для данного атрибута недопустимо, выражение attr() также будет недействительным. Если опущено, по умолчанию используется string . Список допустимых значений:

Значение по умолчанию:пустая строка.

Значение атрибута анализируется как хэш (хэш с 3 или 6 значениями) или ключевое слово. Это должно быть допустимое значение CSS . Начальные и конечные пробелы удаляются.

Значение по умолчанию: currentcolor .

Значение атрибута анализируется как строка, которая используется внутри функции url() CSS . Относительные URL-адреса разрешаются относительно исходного документа, а не относительно таблицы стилей. Начальные и конечные пробелы удаляются.

Значение по умолчанию: URL-адрес about:invalid , указывающий на несуществующий документ с общей ошибкой.

Значение по умолчанию: 0 или, если 0 не является допустимым значением для свойства, минимальное значение свойства.

Значение по умолчанию: 0 или, если 0 не является допустимым значением для свойства, минимальное значение свойства.

Значение по умолчанию: 0 или, если 0 не является допустимым значением для свойства, минимальное значение свойства.

em , ex , px , rem , vw , vh , vmin , vmax , mm , cm , in , pt или pc Experimental

Значение по умолчанию: 0 или, если 0 не является допустимым значением для свойства, минимальное значение свойства.

Значение по умолчанию: 0deg , или, если 0deg не является допустимым значением для свойства, минимальное значение свойства.

deg , grad , rad Experimental

Значение по умолчанию: 0deg , или, если 0deg не является допустимым значением для свойства, минимальное значение свойства.

Значение по умолчанию: 0s или, если 0s не является допустимым значением для свойства, минимальное значение свойства.

Значение по умолчанию: 0s или, если 0s не является допустимым значением для свойства, минимальное значение свойства.

Значение по умолчанию: 0Hz или, если 0Hz не является допустимым значением для свойства, минимальное значение свойства.

Значение по умолчанию: 0Hz или, если 0Hz не является допустимым значением для свойства, минимальное значение свойства.

Значение по умолчанию: 0% или, если 0% не является допустимым значением для свойства, минимальное значение свойства.

Значение, которое будет использоваться, если связанный атрибут отсутствует или содержит недопустимое значение. Если не установлен, CSS будет использовать значение по умолчанию, определенное для каждого .

Formal syntax

 = attr( q-name> attr-type>? , declaration-value>? ) attr-type> = string | url | ident | color | number | percentage | length | angle | time | frequency | flex | dimension-unit> 

Examples

content property

HTML

Источник

attr()

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element’s originating element is returned.

Try it

Syntax

/* Simple usage */ attr(data-count); attr(title); /* With type */ attr(src url); attr(data-count number); attr(data-width px); /* With fallback */ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default"); 

Values

The name of an attribute on the HTML element referenced in the CSS.

A keyword representing either the type of the attribute’s value, or its unit, as in HTML some attributes have implicit units. If the use of as a value for the given attribute is invalid, the attr() expression will be invalid too. If omitted, it defaults to string . The list of valid values are:

Default value: an empty string.

The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS value. Leading and trailing spaces are stripped.

Default value: currentcolor .

The attribute value is parsed as a string that is used inside a CSS url() function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped.

Default value: the URL about:invalid that points to a non-existent document with a generic error condition.

Default value: 0 , or, if 0 is not a valid value for the property, the property’s minimum value.

Default value: 0 , or, if 0 is not a valid value for the property, the property’s minimum value.

Default value: 0 , or, if 0 is not a valid value for the property, the property’s minimum value.

em , ex , px , rem , vw , vh , vmin , vmax , mm , cm , in , pt , or pc Experimental

Default value: 0 , or, if 0 is not a valid value for the property, the property’s minimum value.

Default value: 0deg , or, if 0deg is not a valid value for the property, the property’s minimum value.

deg , grad , rad Experimental

Default value: 0deg , or, if 0deg is not a valid value for the property, the property’s minimum value.

Default value: 0s , or, if 0s is not a valid value for the property, the property’s minimum value.

Default value: 0s , or, if 0s is not a valid value for the property, the property’s minimum value.

Default value: 0Hz , or, if 0Hz is not a valid value for the property, the property’s minimum value.

Default value: 0Hz , or, if 0Hz is not a valid value for the property, the property’s minimum value.

Default value: 0% , or, if 0% is not a valid value for the property, the property’s minimum value.

The value to be used if the associated attribute is missing or contains an invalid value. If not set, CSS will use the default value defined for each .

Formal syntax

=
attr( ? , ? )

=
string |
url |
ident |
color |
number |
percentage |
length |
angle |
time |
frequency |
flex |

Источник

attr ( )

Хотите сделать атрибут элемента видимым на странице? Используйте эту функцию!

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

attr ( ) — это CSS-функция, которая умеет получать значение любого атрибута элемента, а потом использовать это значение прямо в стилях.

Пример

Скопировать ссылку «Пример» Скопировано

 div class="element" title="На самом деле внутри нет никакого текста">div>    Скопировать Скопировано Не удалось скопировать   

 div::before  content: "Элемент с классом " attr(class);> div::after  content: "Подсказка: " attr(title);> div::before  content: "Элемент с классом " attr(class); > div::after  content: "Подсказка: " attr(title); >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 div::before  content: attr(data-title); content: attr(href);> div::before  content: attr(data-title); content: attr(href); >    Скопировать Скопировано Не удалось скопировать   

 div::before  content: attr(src url); content: attr(data-count number); content: attr(data-width px);> div::before  content: attr(src url); content: attr(data-count number); content: attr(data-width px); >    Скопировать Скопировано Не удалось скопировать   

С указанием фолбэка, то есть запасного значения:

 div::before  content: attr(data-count number, 0); content: attr(src url, ""); content: attr(data-width px, inherit); content: attr(data-something, "default");> div::before  content: attr(data-count number, 0); content: attr(src url, ""); content: attr(data-width px, inherit); content: attr(data-something, "default"); >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Функцию attr ( ) можно использовать в качестве значения любого CSS-свойства, однако полностью поддерживается только свойство content . Для остальных свойств поддержка экспериментальная и может различаться от браузера к браузеру. Актуальную информацию о поддержке можно посмотреть на Can I use.

💡 Написание с указанием типа или фолбэка пока имеет статус экспериментальной технологии и не поддерживается браузерами. Но в будущем это позволит гораздо сильнее расширить область применения функции attr ( ) . Например, мы сможем написать так:

 .colored  background-image: attr(data-src url);> .colored  background-image: attr(data-src url); >    Скопировать Скопировано Не удалось скопировать   

Тут мы указали, что в качестве значения для свойства background — image мы хотим использовать значение атрибута data — src . При этом уточнили, что значение атрибута data — src — это не просто строка, а корректный URL.

Примеры записи с указанием типа или фолбэка кажутся довольно перспективными, но, к сожалению, пока не поддерживаются ни одним из браузеров.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 Самый распространённый случай использования функции attr ( ) — отображение значения атрибута href после текста ссылки при печати страницы.

   Подробнее о скидках и акциях можно узнать по ссылке  p> Подробнее о скидках и акциях можно узнать a href="http://best-site.ru/sales">по ссылкеa> p>    Скопировать Скопировано Не удалось скопировать   

 @media print  a::after  content: " [" attr(href) "]"; >> @media print  a::after  content: " [" attr(href) "]"; > >    Скопировать Скопировано Не удалось скопировать   

Источник

How to access and use data attributes in your CSS

I use data attributes all the time in my JavaScript. But did you know that you can also use them in your CSS?

Today, I’m going to show you how to target them as selectors, and (way more cool) access their values and do things with them.

Targeting data attributes with CSS

You use # for IDs ( #main ), and . for classes ( .click-me ).

But you can also target data attributes by wrapping them in square brackets ( [] ).

[data-some-component]  font-weight: bold; font-size: 1.2em; >

For a use case like that, you’re better served with a class, but sometimes it’s helpful to be able to scope selectors by only elements with a specific data attribute.

Note: This can be used for all sorts of other attributes, too, like title , src , alt and more. I’ll cover that in another article.

A more powerful use, though, is accessing the actual content of a data attribute.

Getting a data attribute’s value in CSS

You can access the content of a data attribute with the attr() CSS function. In every major browser, it’s use is limited to the content property.

For example, let’s say you wanted to add some content dynamically to a component based on a data attribute value. You could do this.

div data-content="Some content goes here.">div>

And in your CSS, you do this.

[data-content]:before  content: attr(data-content); >

With this example, that content is better served in the markup itself. But when you need to use the content property and want dynamic content, this is a cool way to do it.

A quick accessibility note: some screenreader/browser combos do not read text rendered with content , so critical content should always go in the markup.

Browser Compatibility

Both attribute selectors and the attr() function work in all major browsers. Attribute selectors also work back to IE7, while the attr() function works in IE8 and up.

Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join over 14k others.

Made with ❤️ in Massachusetts. Unless otherwise noted, all code is free to use under the MIT License. I also very irregularly share non-coding thoughts.

Источник