我有一個style.css與媒體查詢。在我的javascript文件中，我有一個存儲在變量中的期望移動寬度的值。我可以使用javascript/jQuery更改媒體查詢嗎？
通過更改變量，我想自動更改媒體查詢的值。是否有可能改變.css文件的內容與JavaScript一樣，我可以改變DOM？ 使用JavaScript添加HTML <style> - 元素的DOM是不是我所希望的解決方案，因爲我希望將所有的CSS中的.css文件
您可以通過使用$(window).width()
value=959;
if($(window).width() < value)
{
$(".classname").css("color","white");
}
是的，但由於該媒體查詢中有數百個值，因此我需要在數百個CSS中進行更改JavaScript的。我能說一些像$（MEDIAQUERY）.maxWidth（variableValue）; ？ – Skalibran
你可以寫使用Enquire.js jQuery插件。
它是一個JavaScript庫，用於處理JavaScript中的媒體查詢。
這是快速啓動代碼示例：
enquire.register("screen and (max-width:45em)", {
// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},
// OPTIONAL
// If supplied, triggered when the media query transitions
// *from a matched state to an unmatched state*.
unmatch : function() {},
// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},
// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function
// until the first time the media query is matched
deferSetup : true,
// OPTIONAL
// If supplied, triggered when handler is unregistered.
// Place cleanup code here
destroy : function() {}
});
謝謝，我會記住即將到來的網站。由於我在這裏的工作實際上是一個特殊的工具，我不想要任何擴展，除了jQuery。 – Skalibran
最好的辦法是將有兩套僅能應用於基於一個父類存在媒體查詢。
@media (max-width: 600px) {
.w600 .myDiv{
color:red;
}
}
@media (max-width: 400px) {
.w400 .myDiv{
color:red;
}
}
然後，您可以添加/刪除w600或w400到body類，允許所需的媒體查詢工作。
使用jQuery這可能像做：
$("body").addClass("w600")
.removeClass("w400");
我很欣賞你可能已經不僅僅是一種風格更因此想以減少代碼的重複。
在這種情況下，你可以使用CSS transpiler如Less與混入：
@mediaqueryruleset:{
.myDiv{
color:red;
}
.myOtherDiv{
color:blue;
}
}
@media (max-width: 600px) {
.w600 {
@mediaqueryruleset();
}
}
@media (max-width: 400px) {
.w400 {
@mediaqueryruleset();
}
}
這將輸出：
@media (max-width: 600px) {
.w600 .myDiv {
color: red;
}
.w600 .myOtherDiv {
color: blue;
}
}
@media (max-width: 400px) {
.w400 .myDiv {
color: red;
}
.w400 .myOtherDiv {
color: blue;
}
}
這個答案給了我一個想法，根本不使用媒體查詢，而是在必要時將.mobile類設置爲一切。這工作真棒，謝謝！ – Skalibran
@Curt _「你不能動態地改變一個CSS文件中的媒體查詢變量（不通過javascript再次注入整個樣式表」_ _媒體查詢變量可以使用'document.styleSheet'的'.media.mediaText'動態改變' .cssRules' http://plnkr.co/edit/qzLO5J4KlWZLQnjMIy7i?p=preview – guest271314
@ guest271314謝謝我不知道你可以做到這一點，但我仍然不會建議它作爲一個可行的選項，但是有很多依賴按照樣式表/媒體查詢的順序。 – Curt
好吧，我覺得我有適合我的解決方案。我將媒體查詢外包給一個額外的style.css（例如style-mobile.css）。只有當窗口寬度是變量值時，纔會加載此文件。
這個解決方案適合我，但其他人可能找不到這個問題的答案。我是否應該將這個答案標記爲解決方案？
您還必須知道，某些方法可能無法在Safari中正常運行。不記得這個問題，所以你可以找到更多的信息，如果你需要它。
您可以設置直接使用.media.mediaText的document.styleSheets[0].cssRules
document.styleSheets[0].cssRules[0].media.mediaText = /* new media rule here */;
不，它不是不可能性的規則。你爲什麼不寫不同寬度的不同媒體查詢？ – steo
據我所知，不，你不能。然而，你可以做的是在目標元素上通過javascript添加或刪除一個CSS類。 – asprin
您可以使用window.matchMedia（）檢測JS –