Question

我正在使用jQuery来改变一些CSS样式。这是jsfiddle：

当我重新调整浏览器大小时，我的div不会更改属性。任何帮助都会非常充实。这是代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<!-- change css style -->
<script type="text/javascript">
    $(document).resize(function() {

        var red = $('.red');
        red.on('resize', function(){
            if ( red.width() < 600 ){
                red.addClass('green');
            }
        });

             });
</script>


<style type="text/css">
.red {
    height: 500px;
    margin: 0 auto;
    background-color: #F00;
    width: 80%;
    max-width: 1000px;
}
.green {
    width: 100px;
    background-color: #0F0;
    height: 500px;
}
</style>
</head>

<body>

<div class="red">
</div>

</body>
</html>

谢谢，

Answer 1

我认为应该是$(window).resize(function() {，您不需要额外的resize。

$(window).resize(function() {
  var red = $('.red');
  if ( red.width() < 600 ){
    red.addClass('green');
  }
});

Answer 2

您定位错误对象（如其他评论/答案中所述，$(window)将重新调整大小，而不是$('.red')）。

然而，这不是唯一的问题。下面是一个示例小提示，以显示订购此代码的更有效方法。

Better Fiddle Demo

这里的主要区别将显示在浏览器的内存和CPU消耗中。

CSS：

div {
    margin: 0 auto;
    max-width: 1000px;
}
.red {
    height: 500px;
    background-color: #F00;
    width: 80%;
}
.green {
    width: 100px;
    background-color: #0F0;
    height: 500px;
}

上面的CSS将类共享的公共属性放在一起，所以从红色变为绿色只会改变必要的值。

jQuery的：

var $red = $('.red');
if ($red.width() < 600) {
    $(window).on('resize', function () {
        $red.switchClass('red', 'green');   //  Used with jQueryUI for animated change, can easily be .addClass('green') if preferred.
        $(this).off('resize');
    });
}

这里有很多东西。首先，在外部创建用于缓存.red对象的变量，以防止每次窗口重新调整大小时重新创建该变量。当然，如果{{1>}是＆lt; {<1>}，那么下一次更改 A）只会更改为.green。 600px和 B）完全删除事件处理程序，以便在.red没有任何理由重复调用该函数时重新调整页面大小。

基本上所有这些更改都会使您希望.green到.red更改为永久性的假设，.green和.green都会居中并具有最大值 - 宽度为1000px，并且您不希望在将来的重新调整大小时评估任何其他条件（例如更改回.red，更改其他元素等）。

使用jQuery更改CSS样式

2 个答案:

Better Fiddle Demo

CSS：

jQuery的：