Question

我有一个创建CSS样式文件的JSP。在那个JSP中，我使用的是deviceWidth参数，该参数是从调用该JSP的索引页面发送的请求中获取的。我还使用媒体查询来捕获设备中的方向更改。

问题是，一旦进行了方向更改 - 我需要更新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不同。任何方式我可以只更新一次，而不是每个元素单独更新？

Answer 1

只需制作两个css类：

.width1 {
 width: 300px;
}

.width2 {
 width: 500px;
}

然后使用javascript（removeClass / addClass）

更改元素的css类

Answer 2

您可以检测窗口调整大小事件，获取新窗口宽度并相应地更新css：

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

您可能需要使用窗口宽度值进行一些数学运算，但希望这可以让您走上正确的道路。

如何更新css中的参数？

2 个答案: