Работа со стилями в DOM

При работе с Document Object Model (DOM) в JavaScript управление стилями является частой задачей. В этой статье будут рассмотрены различные методы применения стилей к элементам DOM, включая встроенные стили, установку стилей через свойство style и управление классами с помощью методов classList. К концу этого руководства вы получите знания, необходимые для эффективного управления и изменения стилей в ваших веб-проектах.

Встроенные стили

Встроенные стили позволяют применять CSS напрямую к HTML-элементу через атрибут style. Этот подход удобен для быстрых разовых изменений, но не рекомендуется для поддержки крупномасштабных проектов из-за отсутствия масштабируемости и разделения ответственности.

Пример

html

<div id="inlineStyleExample">This text will be styled using inline styles.</div>
<button onclick="applyInlineStyle()">Apply Inline Style</button>

<script>
  function applyInlineStyle() {
    const element = document.getElementById('inlineStyleExample');
    element.style.color = 'red';
    element.style.fontSize = '20px';
  }
</script>

Try it Yourself »

В этом примере нажатие кнопки применит встроенные стили к элементу div, изменив цвет текста на красный, а размер шрифта — на 20 пикселей.

Установка стилей с помощью свойства `style`

Свойство style в JavaScript позволяет динамически изменять CSS-свойства элемента. Этот метод обеспечивает большую гибкость по сравнению со встроенными стилями и позволяет изменять стили программно.

Пример

html

<div id="stylePropertyExample">This text will be styled using JavaScript.</div>
<button onclick="applyStyleProperty()">Apply Style Property</button>

<script>
  function applyStyleProperty() {
    const element = document.getElementById('stylePropertyExample');
    element.style.color = 'blue';
    element.style.fontSize = '18px';
    element.style.margin = '10px';
  }
</script>

Try it Yourself »

В этом примере нажатие кнопки применит несколько стилей к элементу div с помощью свойства style. Цвет текста устанавливается в синий, размер шрифта — в 18 пикселей, а отступ (margin) — в 10 пикселей.

Управление классами

Управление классами — это мощный способ применения стилей к элементам модульным и переиспользуемым образом. Свойство classList предоставляет методы для добавления, удаления, переключения и проверки наличия классов у элемента. Для более сложного управления также доступны classList.replace() и classList.item().

Добавление классов

Метод add() добавляет один или несколько классов к элементу.

Пример

html

<div id="addClassExample">This element will have classes added.</div>
<button onclick="addClass()">Add Class</button>

<script>
  function addClass() {
    const element = document.getElementById('addClassExample');
    element.classList.add('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Try it Yourself »

В этом примере нажатие кнопки добавит классы highlight и text-large к элементу div, применяя соответствующие стили.

Удаление классов

Метод remove() удаляет один или несколько классов с элемента.

Пример

html

<div id="removeClassExample" class="highlight text-large">
  This element will have classes removed.
</div>
<button onclick="removeClass()">Remove Class</button>

<script>
  function removeClass() {
    const element = document.getElementById('removeClassExample');
    element.classList.remove('highlight', 'text-large');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Try it Yourself »

Здесь нажатие кнопки удалит классы highlight и text-large с элемента div.

Переключение классов

Метод toggle() добавляет класс, если его нет, и удаляет, если он уже присутствует.

Пример

html

<div id="toggleClassExample">Click me to toggle the highlight class.</div>
<button onclick="toggleClass()">Toggle Class</button>

<script>
  function toggleClass() {
    const element = document.getElementById('toggleClassExample');
    element.classList.toggle('highlight');
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Try it Yourself »

В этом примере нажатие кнопки будет переключать класс highlight на элементе div.

Проверка наличия классов

Метод contains() проверяет, есть ли у элемента определенный класс.

Пример

html

<div id="containsClassExample" class="highlight">
  This element's classes will be checked.
</div>
<button onclick="checkClass()">Check Class</button>

<script>
  function checkClass() {
    const element = document.getElementById('containsClassExample');
    if (element.classList.contains('highlight')) {
      alert('The element has the highlight class.');
    } else {
      alert('The element does not have the highlight class.');
    }
  }
</script>

<style>
  .highlight {
    background-color: yellow;
  }

  .text-large {
    font-size: 24px;
  }
</style>

Try it Yourself »

Здесь нажатие кнопки проверит, есть ли у элемента containsClassExample класс highlight, и выведет соответствующее уведомление.

Пример из практики: Интерактивный список задач

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

html

<div>
  <h2>To-Do List</h2>
  <p>Here, you can add new items, and mark it as completed by clicking on them.</p>
  <input type="text" id="newTask" placeholder="Add a new task" />
  <button id="addTaskButton">Add Task</button>
  <ul id="taskList"></ul>
</div>

<script>
  const newTaskInput = document.getElementById('newTask');
  const addTaskButton = document.getElementById('addTaskButton');
  const taskList = document.getElementById('taskList');

  addTaskButton.addEventListener('click', () => {
    const taskText = newTaskInput.value;
    if (taskText) {
      const taskItem = document.createElement('li');
      taskItem.textContent = taskText;
      taskItem.classList.add('task');

      taskItem.addEventListener('click', () => {
        taskItem.classList.toggle('completed');
      });

      taskList.appendChild(taskItem);
      newTaskInput.value = '';
    }
  });
</script>

<style>
  .task {
    cursor: pointer;
    padding: 5px;
    border-bottom: 1px solid #ccc;
  }

  .task.completed {
    text-decoration: line-through;
    color: gray;
  }
</style>

Try it Yourself »

В этом примере мы создаем приложение со списком задач, где задачи можно добавлять и отмечать как выполненные по клику. Класс task задает стили задач, а класс completed, применяемый с помощью метода toggle(), указывает на выполненные задачи.

Лучшие практики

Чтобы обеспечить эффективный и поддерживаемый код при работе со стилями в DOM, учитывайте следующие рекомендации:

Разделение ответственности: Держите HTML, CSS и JavaScript раздельно. По возможности используйте JavaScript для управления классами, а не для прямой установки стилей. Этот подход сохраняет разделение ответственности и упрощает поддержку кода.
Избегайте встроенных стилей: Используйте встроенные стили умеренно. Они могут загромождать HTML и усложнять поддержку. Вместо этого предпочитайте добавление и удаление классов, определенных в CSS.
Используйте классы для переиспользования: Определяйте переиспользуемые классы в CSS и используйте JavaScript для их переключения. Это обеспечивает более единообразное оформление в приложении и упрощает обновление стилей.
Используйте методы classList: Применяйте методы classList (add, remove, toggle, contains) для эффективного управления классами. Эти методы просты в использовании и работают быстрее, чем прямое манипулирование свойством className.
Учет производительности: Будьте внимательны к производительности при манипуляциях с DOM. Группируйте изменения стилей, чтобы минимизировать перерасчет макета и перерисовку (reflows и repaints), которые могут влиять на производительность, особенно в сложных или крупных приложениях.

INFO

Используйте CSS-переходы и анимации для более плавных визуальных эффектов вместо анимаций на JavaScript, так как они обычно производительнее и проще в управлении.

Заключение

Понимание и управление стилями в DOM необходимо для создания динамичных и интерактивных веб-приложений. Используя встроенные стили, свойство style и методы управления классами из classList, вы можете реализовать широкий спектр визуальных эффектов и улучшить пользовательский опыт на вашем сайте.

Практика

Какой из следующих методов classList используется для добавления одного или нескольких классов к элементу?

add()remove()toggle()contains()

Работа со стилями в DOM ​

Встроенные стили ​

Пример ​

Установка стилей с помощью свойства style ​

Пример ​

Управление классами ​

Добавление классов ​

Пример ​

Удаление классов ​

Пример ​

Переключение классов ​

Пример ​

Проверка наличия классов ​

Пример ​

Пример из практики: Интерактивный список задач ​

Лучшие практики ​

Заключение ​

Практика ​

Работа со стилями в DOM

Встроенные стили

Пример

Установка стилей с помощью свойства `style`

Пример

Управление классами

Добавление классов

Пример

Удаление классов

Пример

Переключение классов

Пример

Проверка наличия классов

Пример

Пример из практики: Интерактивный список задач

Лучшие практики

Заключение

Практика