使用jQuery更改CSS样式_Jquery_Css

使用jQuery更改CSS样式

jquery css

使用jQuery更改CSS样式,jquery,css,Jquery,Css,我正在使用jQuery修改一些CSS样式。这是JSFIDLE：重新调整浏览器大小时，div不会更改属性。任何帮助都会很好。代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script type="text/javascript" src="//ajax.googleapis.

我正在使用jQuery修改一些CSS样式。这是JSFIDLE：

重新调整浏览器大小时，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>


无标题文件
$（文档）。调整大小（函数（）{
变量red=$（'.red'）；
红色。on（'resize'，function（）{
如果（红色宽度（）<600）{
红色。addClass（“绿色”）；
}
});
});
瑞德先生{
高度：500px；
保证金：0自动；
背景色：#F00；
宽度：80%；
最大宽度：1000px；
}
格林先生{
宽度：100px；
背景色：#0F0；
高度：500px；
}

谢谢，

我认为应该是

$（window）.resize（function（）{

并且您不需要额外的

resize

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

$（窗口）。调整大小（函数（）{
变量red=$（'.red'）；
如果（红色宽度（）<600）{
红色。addClass（“绿色”）；
}
});

您瞄准了错误的对象（如其他评论/回答中所述，将重新调整大小的是

$（窗口）

，而不是

$（'.red'）

）

然而，这并不是这里唯一的问题。下面是一个小提琴示例，展示了排序此代码的更有效方法

这里的主要区别在于浏览器的内存和CPU消耗

CSS: 上面的CSS将类共享的公共属性放在一起，因此从红色更改为绿色只会更改必要的值

jQuery：

var$red=$（'.red'）；
如果（$red.width（）<600）{
$（窗口）.on（'resize'，函数（）{
$red.switchClass（'red'，'green'）；//与jQueryUI一起用于动画更改，如果愿意，可以很容易地使用.addClass（'green'）。
$（this.off（'resize'）；
});
}

这里有很多东西。首先，缓存
的变量。红色对象是在外部创建的，以防止每次窗口重新调整大小时都重新创建它。当然，无论是哪种方式，我的下一次更改都会解决这一问题如果.red 为<600px，则仅更改为.green ，B）完全删除事件处理程序，以便在页面时重新调整页面大小。green 不会无故重复调用函数基本上，所有这些更改都假设您希望将.red 更改为.green 是永久性的，.green 和.red 都居中且最大宽度为1000px，并且您不希望在将来重新调整尺寸时评估任何进一步的条件（例如更改回.red ，更改其他元素等）。您对red.on（'resize'，…）有什么期望该怎么办？DIV不可调整大小。这就是问题所在。我想在调整浏览器大小时更改DIV的宽度大小和背景。调整浏览器大小会在窗口上触发调整大小事件，而不是在红色DIV上。Magic。非常感谢。我已尝试添加一条else语句，以防用户将窗口拖回，但没有为我工作。你有什么想法吗？@valentin请参阅console.log（red.width（））。当你添加green 类时，你正在将red 的宽度更改为100px ，并且没有任何东西会将其更改回来，因此其他将永远不会触发，因为100<600 。也许你想检查red.parent（）.width（）或window.width（）。 div { margin: 0 auto; max-width: 1000px; } .red { height: 500px; background-color: #F00; width: 80%; } .green { width: 100px; background-color: #0F0; height: 500px; } 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'); }); }