Question

我有一个DIV，我根据视口大小调整CSS中的字体大小：

font-size:1em;
@media only screen and (min-width: 300px) {
    font-size:2em; 
}
@media only screen and (min-width: 600px) {
    font-size:3em; 
}

但是，我也有Javascript根据用户是否向下滚动来更改字体大小。

$(window).scroll(function () {
    if ($(this).scrollTop() > 1) {
        $('#div').css('font-size', '1em');       
    }
    else {
        $('#div').css('font-size', '3em');
    }
});

问题是，在用户向下滚动至少一次后，Javascript已将font-size设置为3em，并且@media声明不再适用。< / p>

是否有可能使它在Javascript else子句中，样式恢复为CSS和@media条件中声明的内容？

Answer 1

正如我已经评论过的，不是使用为元素定义内联样式的.css()具有最高优先级，因此你可以重新使用除了jQuery之外的任何东西，这是脏的，或者如果你有几个以上可能会变脏要在if else中重置/更改的属性。

因此，您应该使用.css()和.addClass()方法，而不是使用 ~~.removeClass()~~ ，而且可以很好地完成您所需要的工作。

Answer 2

您应用于#div的样式会覆盖@media声明，因此您必须删除应用的样式。使用空样式（即$('#div').css('font-size', '')）删除css属性。

Answer 3

您可以将其设置为“无”，而不是使用javascript将字体大小恢复正常。这样就可以应用css中定义的样式。

$(window).scroll(function () {
    if ($(this).scrollTop() > 1) {
        $('#div').css('font-size', '1em');       
    }
    else {
        $('#div').css('font-size', '');
    }
});

是否可以从Javascript返回CSS媒体查询声明？

3 个答案: