JQuery 在窗口宽度上添加/删除类

JQuery Add/Removing Classes on Window Width

本文关键字：添加 删除 窗口 JQuery      更新时间：2023-09-26

尝试编写一个小脚本，该脚本基于窗口添加/删除类，

任何帮助将不胜感激。

<script type="text/javascript">
  $(document).ready( function() {
    if ($(window).width() < 500) {
     $('.single-post-rating').removeClass('col-xs-3');
     $('.single-post-rating').addClass('col-xs-12');
     $('.guide-excerpt').removeClass('col-xs-9');
     $('.guide-excerpt').addClass('col-xs-12');
    }
    else {
     $('.single-post-rating').addClass('col-xs-3');
     $('.single-post-rating').removeClass('col-xs-12');
     $('.guide-excerpt').addClass('col-xs-9');
     $('.guide-excerpt').removeClass('col-xs-12');
    }
  });
</script>

我认为您是在追求视口宽度。

您可以通过以下方式访问它 

var viewPortWidth = document.documentElement.clientWidth;

顺便说一句，您可以仅通过CSS媒体查询完成许多良好的响应式布局。

如果你想继续这条路，这是管理窗口宽度的最佳解决方案之一：添加具有 min-with 属性的控件 CSS 类，并将该类分配给容器

.css：

.mediaquerycontrol {
    min-width: 0px;
}
@media (min-width: 992px) {
    .mediaquerycontrol {
        min-width: 992px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .mediaquerycontrol {
        min-width: 768px;
    }
}
@media (min-width: 1200px) {
    .mediaquerycontrol {
        min-width: 1200px;
    }
}

.html：

<body>
  <div class="container mediaquerycontrol">
...

JavaScript：

<script type="text/javascript">
  $(document).ready( function() {
    var pageWidth = parseInt($(".mediaquerycontrol").css("min-width").replace(/[^-'d'.]/g, ''))
    if (pageWidth  < 500) {
     $('.single-post-rating').removeClass('col-xs-3').addClass('col-xs-12');
     $('.guide-excerpt').removeClass('col-xs-9').addClass('col-xs-12');
    }
    else {
     $('.single-post-rating').addClass('col-xs-3').removeClass('col-xs-12');
     $('.guide-excerpt').addClass('col-xs-9').removeClass('col-xs-12');
    }
  });
</script>

但我的建议是使用 bootstrap 的功能，如果您需要较小的列，那么您可以默认增加列数（例如，如果您使用的是 12.3.2 版本，则从 24 增加到 24）

http://getbootstrap.com/2.3.2/customize.html

相关文章：