Question

我正在使用tinyscrollbar在框中显示一些文字。我有2个样式表：

<link rel="stylesheet" media="all and (min-width: 1152px) and (max-width: 9000px)" href="grid-1218.css"/>
<link rel="stylesheet" media="all and (min-width: 1px) and (max-width: 1151px)" href="grid-978.css"/>

我遇到了一个问题：当我更改CSS时，框变大但高度保持不变，我不想在CSS中声明高度，因为我有更多的框。

有没有办法重新运行脚本以获得新的高度？

Answer 1

据我所知，媒体查询更改没有特定事件。

您可以绑定到窗口的resize事件，并在每次调整大小时重新运行您的javascript，或者进行一些检查以确定调整大小是否很重要。

Answer 2

它被接受，只是为了记录。您还可以使用matchMedia和addListener：

window.matchMedia("(min-width: 152px) and (max-width: 900px)").addListener(function(mq) {
    if (mq.matches) {
        oScrollbar5.tinyscrollbar_update();
    }
});

它适用于IE10 +，所以现在确定window.onresize更好。

如何在改变CSS时调用JavaScript

2 个答案: