主页 / 问题 / 1234186
Accepted
Krovorgen
Asked:2022-01-21 14:42:49 +0000 UTC2022-01-21 14:42:49 +0000 UTC

样式不会覆盖

  • 772

模态窗口之前

模态窗口后

请告诉我，我向按钮添加了一个事件处理程序：

    const modalTrigger = document.querySelector('[data-modal]');
    const modal = document.querySelector('.modal');
    const modalCloseBtn = document.querySelector('[data-close]');
    
    modalTrigger.addEventListener('click',  () => {
        modal.classList.add('show');
        modal.classList.remove('hide');
    });

    modalCloseBtn.addEventListener('click',  () => {
        modal.classList.add('hide');
        modal.classList.remove('show');
    });

有这些样式：

.show {
    display: block;
}
.hide {
    display: none;
}

如何使添加的类覆盖之前收到的样式？

javascript

1 个回答

  1. Best Answer

    我们需要使属性更具体。例如像这样：

    .modal.show {
    display: block;
}
.modal.hide {
    display: none;
}

    或者描述类.show和.hide低于.modalCSS 文档中描述的。

    或者在display元素上设置属性：

    modal.style.display = 'none';
modal.style.display = 'block';
    • 1

相关问题