Атрибуты глобальной области

8.1 Атрибут id

Атрибуты глобальной области — это атрибуты, которые могут быть использованы с любым HTML-элементом. Они играют ключевую роль в идентификации, классификации и управлении элементами веб-страниц.

Атрибут id используется для уникальной идентификации элемента на странице. Значение атрибута id должно быть уникальным в пределах всего HTML-документа. Этот атрибут часто используется для связывания с элементами CSS и JavaScript.

Синтаксис:

    
      <element id="unique-id">...</element>
    
  

Пример использования:

    
      #header {
        background-color: #f4f4f4;
        padding: 10px;
      }
    
  

    
      <div id="header">
        <h1>Заголовок</h1>
      </div>
    
  

    
      document.getElementById('header').style.color = 'blue';
    
  

Преимущества:

• Уникальная идентификация: позволяет однозначно идентифицировать элементы на странице
• Стилизация: удобно для применения CSS-стилей
• Манипуляции с DOM: легко получать доступ к элементам с помощью JavaScript

8.2 Атрибут class

Атрибут class используется для задания одного или нескольких классов элементу. Эти классы могут быть использованы для применения стилей CSS и для манипуляций с элементами с помощью JavaScript. В отличие от id, значения class не обязаны быть уникальными.

Синтаксис:

    
      <element class="class-1 class-2">...</element>
    
  

Пример использования:

    
      .highlight {
        background-color: yellow;
      }

      .bold {
        font-weight: bold;
      }
    
  

    
      <p class="highlight">Этот текст выделен желтым.</p>
      <p class="bold">Этот текст жирный.</p>
      <p class="highlight bold">Этот текст жирный и выделен желтым.</p>
    
  

Преимущества:

• Множественные классы: позволяет задавать несколько классов для одного элемента
• Группировка элементов: легко применять стили к группам элементов
• Манипуляции с DOM: позволяет легко работать с группами элементов через JavaScript

8.3 Атрибуты data-*

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

Синтаксис:

    
      <element data-key="value">...</element>
    
  

Пример использования:

    
      <div data-user-id="12345" data-role="admin">
        Пользователь с ID 12345, роль - администратор.
      </div>
    
  

    
// Находим первый элемент на странице, у которого есть атрибут data-user-id
const userElement = document.querySelector('[data-user-id]');

// Получаем значение атрибута data-user-id и выводим его в консоль
console.log(userElement.dataset.userId); // Вывод: 12345

// Получаем значение атрибута data-role и выводим его в консоль
console.log(userElement.dataset.role); // Вывод: admin
    
  

Преимущества:

• Хранение данных: удобно для хранения и передачи данных, связанных с элементами
• Доступ через JavaScript: легко получать доступ и изменять данные через dataset API
• Гибкость: позволяет добавлять любые данные без нарушения стандарта HTML

1

Задача

Модуль 1: Web Core, 6 уровень, 7 лекция

Недоступна

Стилизация с id

Стилизация с id

Открыть

1

Задача

Модуль 1: Web Core, 6 уровень, 7 лекция

Недоступна

Стилизация с class

Стилизация с class

Открыть