我有一个无序列表 <ul>
我也想添加一个事件监听器
如果它适合某个媒体查询。
原始CSS:
@media (max-width: 414px) {
transition: all 3s ease-out;
height: 0px;
display: none;
}
事件监听函数:
if(window.matchMedia("max-width: 414px")) {
console.log(list.style.height);
console.log(list.style.display);
list.style.height = 'auto'
list.style.display = 'unset'
}
帮助:转换似乎不起作用,list.style.height 和 list.style.display 的控制台日志都是空的 ''
最佳答案
转换将不起作用,因为您正在将显示从 none
更改为/更改为。此外,您需要在数值之间转换高度
(auto
不算)。
CSS:
@media (max-width: 414px) {
transition: all 3s ease-out;
height: 0;
}
JS:
if (window.matchMedia("(min-width: 414px)").matches) {
list.style.height = list.style.height + 'px'; // set the exact height
}
关于javascript - 使用事件监听器编辑媒体查询 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46400521/