Я не могу манипулировать свойством отображения CSS с помощью JS? - PullRequest
Новая
       19

Я не могу манипулировать свойством отображения CSS с помощью JS?

0 голосов
/ 20 октября 2019

Я пытаюсь установить отображаемое значение модального блока для блокировки после нажатия на кнопку вызова. Я не мог понять, почему лист JS не может изменить его, даже если я дважды проверил (что я имею в виду, чтобы проверить значения с помощью консоли окна и проверить, соответствует ли он написанному мной листу JS), если я произвел написаниеошибочно или назвал элемент по-другому, но я уверен, что нет ошибки. Однажды я подумал, что метод onclick = () => может не сработать, и вместо этого использовал addEventListener(). Я уверен, что когда я кодирую его в консоли окна, он успешно меняет отображение на блокированное, и я также уверен, что он отображается на других элементах как обычный модал, поэтому он также не скрыт. Я занимался серфингом на некоторых форумах, где есть проблемы на уровне новичка, такие как написание style.display = block вместо style.display: "block", но я не смог найти нигде сходства. Я все еще думал, что что-то не так в моих записях класса / ID.

Вот код: (index.scss) 

.call {
    position: fixed;
    display: block;
}

.modal {
    display: none;
    position: fixed;
    &-content {
        display: block;
        &-close {
            display: block;
        }
    }    
}

(index.js) 

var call = document.querySelector("#call");
var modal = document.querySelector("#modal");
var close = document.querySelector("#close");
const openModal = () => {
    if(modal.style.display === "none") {
        modal.style.display = "block";
    }
};
const closeModal = () => {
    if(modal.style.display === "block") {
        modal.style.display = "none";
    }
}
call.addEventListener("click", openModal);
modal.addEventListener("click", closeModal);

(index.pug) 

.call#call Iletisim
.modal#modal
    .modal-content#content
        span.modal-content-close#close ×

1 Ответ

3 голосов
/ 20 октября 2019

Свойство .style элемента HTML показывает только встроенный стиль элемента. Это стили, добавленные к элементу непосредственно с <a style="display: block;" /> или с Javascript element.style.display = "block";, поэтому проблема, с которой вы сталкиваетесь, заключается в том, что вы получаете undefined при доступе к style.display, поэтому ваш style.display === "block" or "none" никогда не будет истинным. Как программист tip , первое, что нужно сделать с такой проблемой, это поместить console.log в ваши функции openModal и closeModal, чтобы проверить, вызываются ли они, а также проверить,код работает так, как вы ожидаете. С console.log(model.style.display) вы заметите это.

Чтобы получить вычисляемый стиль CSS, вы должны вызвать window.getComputedStyle(element); ( DOC здесь ), но это довольно много процессора и не очень хорошая практикана самом деле, когда у вас хороший CSS, лучший способ, который вы можете сделать, это принять начальное состояние (если нет состояния отображения, тогда предположите, что это none), или использовать классы (что я рекомендую, исходя из моего опыта)Примерно так: 

.modal {
    display: none;
    position: fixed;
    &-content {
        display: block;
        &-close {
            display: block;
        }
    }
    &.shown { // Notice the shown class I added here
        display: block;
    }
}

Затем вы можете добавить или удалить класс .shown к модалу, и он будет прятаться и показывать по вашему удобству: 

const openModal = () => {
    if(!modal.classList.contains("shown")) {
        modal.classList.add("shown");
    }
};
const closeModal = () => {
    if(modal.classList.contains("shown")) {
        modal.classList.remove("shown");
    }
}

Кстати, add и remove уже выполнят contains внутренне (более или менее), поэтому вам не нужно проверять это: 

const openModal = () => {
    modal.classList.add("shown");
};
const closeModal = () => {
    modal.classList.remove("shown");
}

ПРИМЕЧАНИЕ. Лучше использовать классыдля вашего стиля вместо изменения встроенного стиля, потому что в будущем вы можете изменить стиль для отображения с анимацией (например) без необходимости что-либо менять из Javascript.

...