<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Работа с data атрибутами в HTML/CSS/JS

Работа с data атрибутами в HTML/CSS/JS

Все атрибуты у HTML элементов, начинающиеся с префикса data-*, являются пользовательскими. Data атрибуты можно использовать для дополнительной стилизации, но чаще всего они применяются для создания интерактивной логики в JavaScript. Особенно их любят применять разные библиотеки, когда пользователю предлагается настроить скрипт через data атрибуты. Сделать это может любой начинающий вебмастер с начальным уровнем знаний JavaScript.

Использование data атрибутов в HTML и CSS

Data атрибут - это очень гибкий инструмент и сейчас мы рассмотрим, как можно его использовать в HTML и CSS.

Как добавить data атрибут к HTML тегу

Вначале обязательно ставим префикс data, затем через дефис указываем какое-то наше слово подходящее по смыслу и само значение. Например мы хотим отсортировать только категорию с домашними питомцами. Все слова, за исключением самого префикса data-*, мы можем придумывать свои собственные. Так мы можем управлять отдельными группами элементов, помеченные data атрибутами. Это удобно для создания интерактива на языке JavaScript.

<button data-categories="pets">Pets</button>

Длина названия data атрибута может быть любой, слова должны разделяться через дефис.

<div data-is-active-color="red"></div>

Пример стилизации элементов с data атрибутом

Мы можем стилизовать любой элемент по его data атрибуту. В CSS коде селектор data атрибута заключается в квадратные скобки. Обращаться можно только по названию атрибута, по тегу + название или по классу (id) + название.

// HTML код
<div class="large_btn" data-size="large">button</div>

// CSS код
// селектор по названию атрибута
[data-size="large"] {
    font-size: 30px;
    padding: 20px;
}

// селектор по тегу и названию
div [data-size="large"] {
    font-size: 30px;
    padding: 20px;
}

// селектор по классу и названию
large_btn.[data-size="large"] {
    font-size: 30px;
    padding: 20px;
}

Принцип создания подсказок с data атрибутом на CSS

Прописываем текст подсказки в data атрибуте тега. Затем с помощью псевдоэлементов ::before или ::after передать в функцию attr значение атрибута data-tooltip.

<span data-tooltip="текст подсказки"></span>

[data-tooltip]::after {
    content: attr(data-tooltip);
}

Использование data атрибутов в JavaScript

В JS существует, как минимум два способа получения data атрибута:


Первый способ, через getAttribute и setAttribute

Указываем выбранный на странице элемент (тег, id, класс), сам метод getAttribute и название атрибута, который надо получить.

element.getAttribute("data-filter")

Метод setAttribute добавляет значение, указанное вторым параметром ("pillows") в data атрибут в первом параметре ("data-filter").

element.setAttribute("data-filter", "pillows")

Второй способ, через объект dataset в структуре DOM

Доступ к коллекции dataset мы получаем по ключу (слово после префикса data-*).

<div data-person></div>

// Получение data атрибута
div.dataset.person

// Добавление значения для data атрибута
div.dataset.person = "Donald"

Работа с data атрибутами в JavaScript - достаточно актуальная тема, с которой вы будете часто встречаться, более основательно познакомиться с data атрибутами и не только, вы сможете в моем видеокурсе по JavaScript.

Итоги

Data атрибуты позволяют хранить разную информацию об элементе, которая может помочь для работы скриптов, а также для CSS стилизации элементов. HTML код с созданными атрибутами с data-* префиксом будет, абсолютно валидным. Создавать свои собственные data атрибуты для хранения значений стало возможным лишь в HTML5, до этого такой возможности очень не хватало веб-разработчикам. Вот список самых востребованные задач, которые удобно решать с помощью data атрибутов:

  • Создание всплывающих подсказок на чистом CSS
  • Получать и изменять значения атрибутов

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

master284 master284 16.11.2020 12:45:44

Очень классная статья. DATA атрибуты удобная штука в помощь создания алгоритмов на JS при выборе пользователем сайта какого-либо товара для совершения покупки. Если присваивать конкретному товару или группе товаров DATA атрибут в коде HTML 5, то можно перейти к расчётам его цены в различном сочетании свойств товара. Например, мне удалось после изучения курса Михаила по JS написать алгоритм кода калькулятора для расчёта цены металлических сварных решёток разных размеров и покраски. При этом каждый рисунок решётки получил кнопку расчёта цены, что сильно приближает клиента к пониманию без общения с менеджерами сайта.Посмотреть эту работу калькуляторов можно на моей странице https://servis.kharkov.ua/re/ . Кроме того, я использовал технологию показа модального окна, причём не одного, а нескольких окон на всего одной странице на базе статьи М.Русакова о создании модального окна.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.