Javascript 元素css遵循jquery声明，而不是样式表

我最初在.css样式表中有以下内容：

@media only screen and (min-width: 901px){
    #main_panel {
          width: 750px;
        }
    }

@media only screen and (min-width: 300px) and (max-width: 900px), handheld {
    #main_panel {
          width: 500px;
        }
    }

然后在一些用户交互之后，这个jQuery命令会更改这个CSS值：

$("#collapse").click(function() {
      if ((($(window).width()) >= 600) && ($(window).width() <= 900)) {
           $("#main_panel").animate({width: "500px"}, 'slow');
      }
});

$（“#折叠”）。单击（函数（）{
如果（（$（window.width（））>=600）和（$（window.width（），因为您使用的是jQuery Animate，元素样式将直接接收宽度值

像这样：

<el id="mainpanel" style="width: 500px">

（演示）

请注意，您应该避免这样做，因为如果需要，您将无法更改此选项。
***编辑**

如果您希望优先考虑CSS，并且仍然能够为其设置动画，您可能需要的是：


1） 创建“普通”面板类并设置其样式

.panel {width:750px;height:400px}

.collapsed {width:500px}

2） 创建一个折叠的类并设置其样式

.panel {width:750px;height:400px}

.collapsed {width:500px}

3） 创建一个函数，从css读取折叠宽度和正常宽度：

function getClassWidth(aClass) {
    return parseInt($("<div />").addClass(aClass).css('width'));
}

您可以这样做，因此如果用户调整窗口大小并且css更改，您的屏幕将正确更新

**旧帖子（供参考）**

如果使用JQuery设置大小，则可以继续这样设置：

var collapsed=false;

$( window ).resize(calculateNewSizes); // When resized
calculateNewSizes(); // At startup

function calculateNewSizes() {
    if(collapsed) {
        // if screen width < xxx set elemt width to yyy, etc.. collapsed version

    } else {
        // if screen width < xxx set elemt width to yyy, etc..
    }
}

// This toggles the collapsed state if user clicks on an element
$("#collapse").click(function() {
      collapsed=!collapsed;
      calculateNewSizes(); // or do the animation here
});

var=false；
$（窗口）。调整大小（calculateNewSizes）；//调整大小时
calculateNewSizes（）；//启动时
函数calculateNewSizes（）{
如果（折叠）{
//如果屏幕宽度

应在所有要调整大小的元素开始后尽快调用此脚本，以避免出现错误


//执行$（窗口）。在此处调整（…）大小
…所有其他东西。

警告，此代码未经测试。。它只是为了展示一个想法。
嗨，Francesco，谢谢你的建议，但正如我提到的，我希望避免使用$（窗口）。resize（）来自jquery的事件，我只想对外部样式表中的css声明进行优先级排序。我不希望忽略原始样式表，用户开始在网站中进行交互。但我不能将！放在所有css中，因为它将永远不变。
<div class="to be resized">
  <script>
    //do the $( window ).resize(...) here
  </script>
... all other stuff </div>.