логотип PurpleSchool
логотип PurpleSchool

.style в JavaScript

Автор

Дмитрий Нечаев

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

Введение в .style

Свойство .style представляет собой объект, который содержит все инлайновые стили элемента. Он позволяет нам добавлять, изменять и удалять CSS-стили элемента непосредственно из JavaScript, что делает его мощным инструментом для динамического управления внешним видом страницы.

Примеры использования .style

Давайте рассмотрим несколько примеров использования свойства .style для изменения CSS-стилей элементов.

1. Изменение цвета фона элемента

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример</title>
</head>
<body>
  <div id="myElement">Это элемент</div>

  <script>
    // Получаем ссылку на элемент
    const element = document.getElementById('myElement');

    // Изменяем цвет фона элемента
    element.style.backgroundColor = 'lightblue';
  </script>
</body>
</html>

В этом примере мы изменяем цвет фона элемента с помощью свойства .style.backgroundColor.

2. Изменение размера шрифта и цвета текста

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример</title>
</head>
<body>
  <p id="myText">Это текст</p>

  <script>
    // Получаем ссылку на элемент
    const text = document.getElementById('myText');

    // Изменяем размер шрифта и цвет текста
    text.style.fontSize = '20px';
    text.style.color = 'red';
  </script>
</body>
</html>

В этом примере мы изменяем размер шрифта и цвет текста элемента с помощью свойств .style.fontSize и .style.color.

3. Изменение отступов и позиционирование элемента

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример</title>
  <style>
    #myBox {
      width: 100px;
      height: 100px;
      background-color: lightgreen;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="myBox">Это блок</div>

  <script>
    // Получаем ссылку на элемент
    const box = document.getElementById('myBox');

    // Изменяем отступ сверху и позиционирование элемента
    box.style.marginTop = '50px';
    box.style.position = 'relative';
    box.style.left = '50px';
  </script>
</body>
</html>

В этом примере мы изменяем отступ сверху и позиционирование элемента с помощью свойств .style.marginTop, .style.position и .style.left.

Заключение

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

Стрелочка влево.textContent в JavaScript.setProperty() в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие unload в JavaScriptСобытие wheel в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний