如何更新css中的參數？

我有一個JSP創建一個CSS樣式文件。在那個JSP中，我使用了一個deviceWidth參數，它是通過調用該JSP的索引頁發送的請求獲得的。我還使用媒體查詢來捕捉設備中的方向更改。如何更新css中的參數？

問題是，一旦方向改變，我需要更新deviceWidth參數，我不知道該怎麼做。

我似乎無法在'style'區塊內使用'script'標籤，並且通過window.location.href ...回憶頁面，但新參數值也不起作用。

澄清：這是我的JSP的樣子：

<% 
    double deviceWidth = new Double(request.getParameter("width")); 
%> 

<style> 
    .class1{ 
     BLA BLA BLA <%=deviceWidth%>px; 
    } 

    .class2{ 
     BLA BLA BLA <%=deviceWidth%>px; 
    } 

    .class3{ 
     BLA BLA BLA <%=deviceWidth%>px; 
    } 

    @media only screen and (orientation: portrait){ 
     .class1{ 
     FOO FOO <%=deviceWidth%>px; 
     } 

     .class2{ 
     FOO FOO <%=deviceWidth%>px; 
     } 

    } 
</style>

只在每個部分更多的類和媒體查詢裏面的deviceWidth應該是一個不同的，則媒體之外deviceWidth查詢。任何方式，我可以只更新一次，而不是單獨爲每個元素？

來源

2013-11-04 yogev

只是讓兩個CSS類：

.width1 { 
width: 300px; 
} 

.width2 { 
width: 500px; 
}

然後更改CSS類的元素與JavaScript（removeClass/addClass）

來源

2013-11-04 09:20:15 Cracker0dks

我想我可能會被誤解......它不是關於一個css CLASS，而是一個包含很多類的css整個FILE。我在該CSS中使用參數deviceWidth。例如： .myDiv {left：<％= deviceWidth％>/2} 當用戶翻轉設備時，設備寬度變化... – yogev

您可以檢測到窗口大小調整事件，抓住新的窗口的寬度和相應地更新CSS：

$(window).resize(function() { 
    var value = $(window).width(); 
    $('.myClass').css('width', value + 'px'); 
});

您可能需要做一些數學與窗口寬度值，但希望這可以讓你在正確的道路上。

來源

2013-11-04 09:28:31 bmcculley

非常感謝，首先。但是，如果我知道它是正確的 - 我需要用我在頁面中的每個元素來做到這一點。是不是有一種方法，我可以重新調用整個CSS只有一個新的deviceWidth值？ – yogev

哦，我以爲你有多個你想使用的樣式表。我會更新我的答案。 – bmcculley

非常感謝布萊克。我很抱歉嘮叨，但據我看來 - 它仍然迫使我做我的CSS中的每一個元素，對不對？我會嘗試編輯我的問題，以澄清 – yogev

如何更新css中的參數？

回答

相關問題