• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Использование атрибутов (data- *) на CSS (Использование data-* атрибутов при помощи CSS)
Использование атрибутов (data- *) на CSS
Kosten
Четверг, 12 Сентября 2019 | Сообщение 1
Онлайн
Администраторы
Сообщений:44268
Награды: 70
Особенностью атрибутов данных HTML является то, что их значения могут быть напрямую отображены через CSS. Всякий раз, когда содержимое на странице изменяется, обычным процессом является показ измененного содержимого через Javascript с добавление нового HTML.

Но это может быть альтернативно сделано с использованием атрибутов данных в CSS, где всякий раз, когда значение атрибута данных изменяется, новое значение автоматически отображается на странице.

Атрибуты данных в CSS

Данные-атрибуты могут быть прочитаны в CSS с помощью свойства content, где содержание свойства CSS можно использовать только ::before и ::after псевдо-элементов.

HTML

Код
<div id="container" data-point="14">Сообщение 1</div>

CSS

Код
/* содержимое псевдоэлемента будет установлено в текущее значение "data-point" */
#container::before {
    content: attr(data-point);
}

В приведенном выше примере, когда значение data-point изменяется, отображаемое содержимое #container::before будет изменено на новое значение атрибута.

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

Код
/* содержимое псевдоэлемента будет установлено на текущее значение "data-point" */
#container::before {
    content: attr(data-point);
}

/* установите цвет псевдоэлемента на красный data-point=50 */
#container[data-point="50"]::before {
    color: red;
}
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Использование атрибутов (data- *) на CSS (Использование data-* атрибутов при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: