是否有可能從Javascript返回到CSS媒體查詢聲明？

我有一個DIV，我在CSS根據視口尺寸調整字體大小：是否有可能從Javascript返回到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聲明不再適用。

是否可以這樣做，以便在Javascript else子句中，樣式恢復爲在CSS和@media條件中聲明的內容？

來源

2015-04-16 Questioner

使用'.addClass（）'和'.removeClass（）'方法，而不是使用'的CSS（）'方法，它適用內嵌樣式具有最高的優先級.. –

@ Mr.Alien我想你應該回答這個問題。海事組織是最好的建議。 – Danield

@Danield酷，謝謝，我會做必要的 –

而不是用javascript設置字體大小恢復正常，你可以將它設置爲'沒有'。這樣你的css中定義的樣式就可以應用了。

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

來源

2015-04-16 08:46:17 SCHTAILian

雖然有兩個相同的信息的答案，我給這個檢查只是爲了有更完整的代碼。 – Questioner

您應用於#div的樣式將覆蓋@media聲明，因此您必須刪除應用的樣式。使用空白樣式（即$('#div').css('font-size', '')）刪除CSS屬性。

來源

2015-04-16 08:37:04 Erwin

正如我已經評論過的，而不是使用.css()爲一個元素定義內聯樣式具有最高優先級，因此您可以重置它只有jQuery，它是髒的或可能變髒，如果你有兩個以上的屬性需要重置/更改爲ifelse。

因此，而不是使用~~.css()~~你應該使用.addClass()和.removeClass()方法和將完成的好東西你正在尋找。

來源

2015-04-16 08:45:15

Upvoted，因爲這是非常有用的信息，並在某些情況下肯定會走的路。但是，在我的情況下，我有一些DIV使用通過它們的id應用的樣式，並且樣式指定的類不會超過它們。所以，特別是在這個例子中，我標記的另一個答案使我的生活變得輕鬆一些。 – Questioner

是否有可能從Javascript返回到CSS媒體查詢聲明？

回答

相關問題