Как изменить стили CSS с помощью JavaScript: Подробное руководство с примерами

1. Изменение конкретного стиля

Самый простой способ изменения стилей элемента - использовать свойство style у объекта DOM. Например, давайте представим, что у нас есть текстовый элемент, который мы хотим изменить по нажатию на кнопку:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Изменение стилей с JavaScript</title>
</head>
<body>

<div id="myElement">Этот текст будет изменен</div>
<button onclick="changeStyle()">Изменить стиль</button>

<script>
  function changeStyle() {
    var element = document.getElementById("myElement");
    element.style.color = "red"; // Изменение цвета текста на красный
    element.style.fontSize = "20px"; // Изменение размера текста на 20 пикселей
  }
</script>

</body>
</html>

При нажатии на кнопку "Изменить стиль" текстовый элемент изменит свой цвет на красный и размер на 20 пикселей.

2. Применение класса

Если у вас есть определенный класс CSS, который вы хотите применить к элементу, вы можете использовать метод classList.add(). Например, давайте применим класс, который делает фон элемента желтым:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Изменение стилей с JavaScript</title>
  <style>
    .highlighted {
      background-color: yellow;
    }
  </style>
</head>
<body>

<div id="myElement">Этот текст будет изменен</div>
<button onclick="applyClass()">Применить класс</button>

<script>
  function applyClass() {
    var element = document.getElementById("myElement");
    element.classList.add("highlighted"); // Применение класса
  }
</script>

</body>
</html>

При нажатии на кнопку "Применить класс" фон текстового элемента станет желтым.

3. Изменение нескольких стилей сразу

Вы также можете изменить несколько стилей одновременно, используя свойство style.cssText. Например, давайте изменим цвет текста и сделаем его жирным:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Изменение стилей с JavaScript</title>
</head>
<body>

<div id="myElement">Этот текст будет изменен</div>
<button onclick="changeMultipleStyles()">Изменить стили</button>

<script>
  function changeMultipleStyles() {
    var element = document.getElementById("myElement");
    element.style.cssText = "color: blue; font-weight: bold;"; // Изменение нескольких стилей сразу
  }
</script>

</body>
</html>

При нажатии на кнопку "Изменить стили" текст станет синим и жирным.

Эти примеры демонстрируют как использовать JavaScript для изменения стилей элементов на веб-странице. Они представляют простые и эффективные способы управления внешним видом веб-страницы в реальном времени.

Комментарии

Коментарии отсутствуют, будьте первым(ой) кто напишет под этим постом!

Написать коментарий