Изменение непрозрачности элемента в JavaScript
По сути, я хотел изменить непрозрачность элемента сетки с помощью прослушивателя событий. В этом прослушивателе событий я бы получил непрозрачность элемента и увеличил ее на 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;
}
});
Где square означает следующее
const cont = document.querySelector(".cont");
const square = document.createElement("div");
А затем добавляю square.
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;
}});
Кажется, это поиск истинного значения в содержании непрозрачности.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
когда вы извлекаете стиль, он возвращается в виде строки (см. мою демонстрацию), поэтому, когда вы сравниваете его с 0,1, он работает неправильно. Что вам нужно сделать, это использовать parseFloat(e.target.style.opacity)
document.querySelector("P").addEventListener("mouseenter", (e) => {
console.info("here: " + typeof e.target.style.opacity);
});p {
opacity: 0.5;
}<p>Test</p>Магия вашего ответа на Reddit заключается не в операторе if, а в использовании Number, поскольку все атрибуты со значениями являются строками. Итак, вам нужно преобразовать строку в число.
document.querySelector("p").addEventListener("mouseenter", (e) => {
e.target.style.opacity = Number(e.target.style.opacity) + 0.1;
});p {
opacity: 0.1;
}<p>Test</p>