Меняем свойства CSS при наведении на div с помощью JS

Быстрый ответ

Если вам необходимо срочно изменить CSS-свойства HTML-элемента через JavaScript, воспользуйтесь методом getElementById и присвойте новое значение свойству style:

// Красный цвет не для нас, давайте перекрасим в зелёный!
document.getElementById("myElement").style.color = "green";

Для CSS-свойств, состоящих из нескольких слов, используйте camelCase:

// Делаем текст больше, чтобы было более заметно.
document.getElementById("myElement").style.fontSize = "2em";

Данная возможность позволяет гибко подстраивать стили на лету.

Прояснение цели: Выбор элементов

Если потребуется изменить стили сразу для нескольких элементов, примените getElementsByClassName:

// Найдём элементы с классом ".myClass"
let elements = document.getElementsByClassName("myClass");
for (let element of elements) {
    // Пусть они будут ассоциироваться с чистым небом!
    element.style.backgroundColor = "lightblue";
}

Пользователи querySelectorAll и forEach могут воспользоваться этими функционалами для быстрого перебора и стилизации:

// Каждый обладатель класса .myClass изменит свой окрас.
document.querySelectorAll(".myClass").forEach(element => element.style.backgroundColor = "lightblue");

Шквал стилей: Одновременное изменение нескольких свойств с помощью Object.assign()

Функция Object.assign() позволяет обновить внешний вид элемента, одновременно меняя все его стили:

// Кардинально меняем стили "myElement"!
Object.assign(document.getElementById("myElement").style, {
    color: "green",
    fontSize: "20px",
    border: "1px solid black"
});

От скуки к красоте: Переключение классов стилей

Для визуальных трансформаций элемента используйте classList:

// Предварительная подготовка элемента
let element = document.getElementById("myElement");
// Это больше, чем мода, это способ самовыражения!
element.classList.add("newStyle");
// Организуем динамичное переключение класса "activeStyle"
element.classList.toggle("activeStyle");

Игры с наведением: Работа со стилями интерактивных элементов

Внедрите эффекты при наведении с помощью слушателей событий и перейдите за пределы стандартного CSS :hover:

// Подготавливаем "myElement" для манипуляций с тенью.
let element = document.getElementById("myElement");
element.addEventListener('mouseenter', () => {
    // Вас вроде бы окутывает полумрак!
    element.style.boxShadow = "0px 0px 15px rgba(0,0,0,0.5)";
});
// И тень исчезает, как только вы убираете курсор...
element.addEventListener('mouseleave', () => {
    element.style.boxShadow = "none";
});

В едином ритме: Кроссбраузерность

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

Визуализация

Допустим, у вас есть дом (HTML-элемент), который нужно материально обновить (изменить CSS-свойство):

До перекрашивания: 🏠 с 🎨🛑 (красной краской)

Осуществим это с помощью JavaScript:

house.style.color = 'blue';

Что ж, вы сделали это:

После перекрашивания: 🏠 с 🎨🔵 (синей краской)

Всего лишь одна строка JavaScript превратила ваш HTML-"дом" в совершенно новый объект. Знакомьтесь – это ваш новый синий дом!

Четкость намерений: Сделайте код понятным благодаря комментариям

Неинтуитивное поведение? Сложная логика? Оставьте комментарии в JavaScript-коде:

// Все мы любим магические кнопки. Нажмите – и она сверкнёт золотом!
document.getElementById("myElement").addEventListener("click", function() {
    this.style.backgroundColor = 'gold';
});

Отладка или "Почему это не работает!"

Что-то не сошлось? Используйте console.log() в JavaScript и инструментами для разработчиков в вашем браузере:

// Откроем великую тайну – какой же цвет у элемента на самом деле!
console.log(element.style.color);

Современный синтаксис: Разнообразьте стиль!

Любители красивого кода смогут оценить современный метод со spread оператором, который совмещает в себе старые и новые стили:

// "myElement" будет следовать последним трендам.
let newStyles = { fontSize: '2em', color: 'coral' };
element.style = { ...element.style, ...newStyles };

Способствуйте простоте и избегайте излишней сложности

Придерживайтесь принципа KISS (Keep It Simple, Stupid!) и начинайте с наименее интенсивных методов, чтобы достичь нужного результата. Иногда для стильного решения лучше подойдёт чистый CSS, а не JavaScript.

Полезные материалы

1. HTMLElement: свойство style – Web API | MDN – подробнее о основах работы со стилями с помощью JavaScript.
2. JavaScript DOM CSS – реальная практика работы с CSS через JavaScript HTML DOM.
3. JavaScript для регулировки насыщенности и яркости цветов RGB | CSS-Tricks – овладейте изменением цветовых характеристик стилей при помощи JavaScript.
4. Document: метод querySelector() – Web API | MDN – узнайте больше об изменении стилей элементов с помощью JavaScript.
5. CSSStyleDeclaration – Web API | MDN – изучите, как функционирует интерфейс для CSS-свойств в JavaScript.
6. HTML DOM Style объект – больше информации о том, как изменять стили элементов с помощью HTML DOM Style объекта.
7. Стили и классы – усовершенствуйте свои навыки в управлении динамической стилизацией благодаря JavaScript.