Изменение непрозрачности элемента в JavaScript ⇐ CSS

[Anonymous]

По сути, я хотел изменить непрозрачность элемента в сетке с помощью прослушивателя событий. В этом прослушивателе событий я бы получил непрозрачность элемента и увеличил ее на 0,1. Раньше я делал это, используя следующий код:

Код: Выделить всё

square.addEventListener("mouseover", function (e) {
let opacity = e.target.style.opacity;
if (opacity + 0.1 < 1) {
e.target.style.opacity = opacity + 0.1;
} else if (opacity + 0.1 >= 1) {
e.target.style.opacity = 1;
}
});

Где квадрат означает следующее

Код: Выделить всё

const cont = document.querySelector(".cont");
const square = document.createElement("div");

А затем добавляю квадрат.

Код: Выделить всё

cont.appendChild(square);

Ну, мою проблему можно описать следующим образом. Непрозрачность увеличивается только до 0,1, и если вы снова наведете курсор на квадратный элемент, непрозрачность будет равна 0,1 каждый раз, и она никогда не увеличится. У меня есть теория, что непрозрачность элемента div на каждой итерации инициализируется значением 0. Это подозрение возникает, когда я думал об этой проблеме, но, похоже, оно подтверждается очень хорошим решением, которое я нашел на Reddit

Код: Выделить всё

square.addEventListener("mouseover", function (e) {
let opacity = e.target.style.opacity;
if (opacity) {
e.target.style.opacity = Number(opacity) + 0.1 ;
} else {
e.target.style.opacity = 0.1;
}});

Похоже, это ищет истинное значение в содержимом непрозрачности.

Подробнее здесь: https://stackoverflow.com/questions/783 ... javascript