Javascript 根据屏幕大小向html添加类

当屏幕大小小于x像素量时，HTML应该得到一个类，如果它大于或小于x像素量，它应该得到一个不同的类，依此类推

我正在使用jQuery2.2.1

JavaScript

$（document）.on（'resize，ready'，function（）{
//如果屏幕大小等于，则添加类
变量$window=$（window），
$html=$（'html'）；
函数resize（）{
如果（$window.width（）<768）{
返回$html.addClass（'xs'）；
}
如果（$window.width（）>768&&$window.width（）<992）{
返回$html.addClass（'sm'）；
}
如果（$window.width（）>992&&$window.width（）<1200）{
返回$html.addClass（'md'）；
}
else if（$window.width（）>1200）{
返回$html.addClass（'lg'）；
}
$html.removeClass（'xssmmdlg'）；
}
$window.resize（resize）.trigger（'resize'）；
});

问题是，在页面加载时，它将获得正确的类，在调整浏览器大小时，正确的类将添加，但不会删除旧类

我正在使用此帖子中的代码：

---

在删除旧类之前返回时，代码不起作用

通过在设置新类之前删除旧类来进行如下更改

$(document).on('resize, ready', function() {
 // Add class if screen size equals
 var $window = $(window),
 $html = $('html');

 function resize() {
    $html.removeClass('xs sm md lg');

    if ($window.width() < 768) {
      return $html.addClass('xs');
    }
    else if ($window.width() > 768 && $window.width() < 992) {
      return $html.addClass('sm');
    }
    else if ($window.width() > 992 && $window.width() < 1200) {
      return $html.addClass('md');
    }
    else if ($window.width() > 1200) {
      return $html.addClass('lg');
    }
  }
  $window.resize(resize).trigger('resize');
});

$（document）.on（'resize，ready'，function（）{
//如果屏幕大小等于，则添加类
变量$window=$（window），
$html=$（'html'）；
函数resize（）{
$html.removeClass（'xssmmdlg'）；
如果（$window.width（）<768）{
返回$html.addClass（'xs'）；
}
如果（$window.width（）>768&&$window.width（）<992）{
返回$html.addClass（'sm'）；
}
如果（$window.width（）>992&&$window.width（）<1200）{
返回$html.addClass（'md'）；
}
else if（$window.width（）>1200）{
返回$html.addClass（'lg'）；
}
}
$window.resize（resize）.trigger（'resize'）；
});

我认为您应该在方法的开头删除旧类，然后像这样删除每个类：

function resize() {
  $html.removeClass('xs sm md lg');

    if ($window.width() < 768) {
      return $html.addClass('xs');
    }
    else if ($window.width() > 768 && $window.width() < 992) {
      return $html.addClass('sm');
    }
    else if ($window.width() > 992 && $window.width() < 1200) {
      return $html.addClass('md');
    }
    else if ($window.width() > 1200) {
      return $html.addClass('lg');
    }

  }

---

使用jquery.attr，它会自动从jquery中删除其他类

要用另一个类替换所有现有的类，我们可以使用.attr（“class”，“newClass”）

$（document）.on（'resize，ready'，function（）{
//如果屏幕大小等于，则添加类
变量$window=$（window），
$html=$（'html'）；
函数resize（）{
如果（$window.width（）<768）{
返回$html.attr（“class”，“xs”）；
}
如果（$window.width（）>768&&$window.width（）<992）{
返回$html.attr（“类”、“sm”）；
}
如果（$window.width（）>992&&$window.width（）<1200）{
返回$html.attr（“class”，“md”）；
}
else if（$window.width（）>1200）{
返回$html.attr（“class”，“lg”）；
}
}
$window.resize（resize）.trigger（'resize'）；
});
.xs正文{
背景：红色；
}
.sm机构{
背景：蓝色；
}
博士身体{
背景：黑色；
}
.lg机构{
背景：紫色；
}

JS-Bin
/*缓存对象*/
$html=$（'html'）；
$（文档）.on（'resize，ready'，function（））{
/*最初删除所有现有类*/
$html.removeClass（'xssmmdlg'）；
变量宽度=$（窗口）.width（）；
如果（宽度<768）{
返回$html.addClass（'xs'）；
}否则如果（宽度>768&&width<992）{
返回$html.addClass（'sm'）；
}否则，如果（宽度>992和宽度<1200）{
返回$html.addClass（'md'）；
}否则{
返回$html.addClass（'lg'）；
}
});
这听起来像是一个XY问题，正确的答案应该是使用CSS媒体查询。@Rorymcrossan我使用的是媒体查询，但我使用的是一些JS代码，如果不在某个宽度之间，会出现什么问题；）在这种情况下，代码是什么？你的JS应该完全不知道UI的状态；这是CSS的工作。您应该移动$html.removeClass（'xs-sm-md-lg'）；到resize（）函数的顶部；这可以单独在媒体查询中完成：如果您减小JS面板的宽度，您将看到菜单项永久可见。要在移动设备上执行此操作，请仅使用
max device width
而不是
max width
。请注意，您可以对removeClass进行单个调用：
removeClass（'xs sm md lg'）为什么重复.removeClass当您可以将空间分隔类传递给要删除的函数时
function resize() {
  $html.removeClass('xs sm md lg');

    if ($window.width() < 768) {
      return $html.addClass('xs');
    }
    else if ($window.width() > 768 && $window.width() < 992) {
      return $html.addClass('sm');
    }
    else if ($window.width() > 992 && $window.width() < 1200) {
      return $html.addClass('md');
    }
    else if ($window.width() > 1200) {
      return $html.addClass('lg');
    }

  }

$html.attr("class","");

/* cache object */
$html = $('html');

$(document).on('resize, ready', function() {
    /* initially remove all existing classes */
    $html.removeClass('xs sm md lg');

    var width = $(window).width();
    if (width < 768) {
        return $html.addClass('xs');
    }else if (width > 768 && width < 992) {
        return $html.addClass('sm');
    }else if (width > 992 && width < 1200) {
        return $html.addClass('md');
    }else{
        return $html.addClass('lg');
    }
});