Javascript Jquery，当屏幕宽度为1050px时删除类

这是我正在使用的JS代码：

$("document").ready(function($){
var nav = $('#menu2');

$(window).scroll(function () {
    if ($(this).scrollTop() > 90) {
        nav.addClass("f-nav");
    } else {
        nav.removeClass("f-nav");
    }
});

但我似乎无法将其写入我的代码中

function checkWidth(init){
/*If browser resized, check width again */
if ($(window).width() < 514) {
    $('html').addClass('mobile');
}
else {
    if (!init) {
        $('html').removeClass('mobile');
    }}}$(document).ready(function() {
checkWidth(true);

$(window).resize(function() {
    checkWidth(false);
});

函数检查宽度（init）{
/*如果浏览器已调整大小，请再次检查宽度*/
如果（$（窗口）.width（）<514）{
$（'html'）.addClass（'mobile'）；
}
否则{
if（！init）{
$（'html'）.removeClass（'mobile'）；
}}}$（文档）.ready（函数（）{
检查宽度（真）；
$（窗口）。调整大小（函数（）{
检查宽度（假）；
});

---

我想要的是，当

.f-nav

被添加到

#menu2

中时，当屏幕是

时，当您在大于断点的屏幕上加载网站时，脚本将无法工作，因为您需要重新计算屏幕大小（在这种情况下刷新页面）。您需要在调整大小时获得屏幕的宽度。使用resize（）方法，并在其中放置您的测试条件，并将类分配给您的元素

编辑：也可以在现代浏览器中使用javascript进行媒体查询

if (matchMedia) {  // check if browser supports media queries from JavaScript
    var mq = window.matchMedia("(max-width: 1050px)");
    WidthChange(mq);
    // every time width changes, check the media query
    mq.addListener(function WidthChange(mq){
       if(mq.matches){
           //we are in a mobile size browser
           $('#menu2').addClass('mobile');
           $('#menu2').removeClass('f-nav');
       } else{
           // desktop browser
           $('#menu2').addClass('f-nav');
           $('#menu2').removeClass('mobile');
       }
    });
}

如果要更改JS中div的类，可以执行以下操作：

document.getElementById("#YourId").className = "YourNewClass"

它只会更改您的类属性：-）

这样，您还可以检查使用了哪个类，并使用该类执行您想要执行的操作

感谢Olaf Dietsche编辑：这一定是一篇重复的文章，下面是您的答案：
要将
html
更改为
#menu2
，只需将其中一篇替换为另一篇。jQuery在这方面非常简单

if（$（窗口）.width（）<514）{
$（'#menu2'）.addClass（'f-nav'）；
}否则{
$（'#menu2'）.removeClass（'f-nav'）；
}

有几种方法可以做到这一点：

仅限Javascript
在行动中看到它：

Javascript

var mode = window.getComputedStyle(document.body,':after').getPropertyValue('content');

请注意：IE<9不支持
getComputedStyle
。您必须使用polyfill。
使用一口井似乎更简单。我为其构建网站的人根本不需要媒体查询。我已经说过这更简单，但他只需要一个非常干净而不是额外的简单css。PS对不起，我的英语我是荷兰人，我正在尝试。所以他很乐意用简单易懂的CSS替换过于复杂和不必要的JavaScript，以避免使用一个相对较新的功能？我不认为这有什么好处，但可能只有我一个人。这就是你应该回过头来告诉他CSS媒体查询比使用JavaScript更干净的地方。答案有什么问题吗我能把resize链接到removeclass吗？我是javascript的新手。我知道基本的东西，但是当涉及到相互链接时，我破坏了javascript。是的，我知道。但是我想把它链接到：函数checkWidth（init）{/*如果浏览器调整了大小，再次检查width*/If（$（window.width（）<514）{$（'html'）。addClass（'mobile'）；}else{if（！init）{$（'html'）.removeClass（'mobile'）；}}}}$（document.ready（function（）{checkWidth（true）；$（window.resize（function（）{checkWidth（false）；}）；哦，好吧，我的错！就像Olaf Dietsche说的，你可以查看与你类似的帖子：我知道这一点，但我必须使用Javascript。我知道如何使用Javascript添加和删除类。但我想将其链接到当我的屏幕达到1050px时，当它达到1050px时，该类将被删除。下面是一个最简单的方法，你可以在你的js中使用媒体查询，我相信它只在现代浏览器中受支持，不过谢谢。这正是我想要的。你知道这一点吗？你能帮我解决另外一个小问题吗？尝试了一下，但结果只有在我放置
$（窗口）时才起作用。在
$（文档）中调整
的大小.ready
。请重新查看或更新此处的答案，好吗？
$(window).resize(function() {
    if ($(window).width() < 1050) {
        $selector.removeClass('my-class');
    } else {
        $selector.addClass('my-class');
    }
}).resize(); // trigger resize event initially

@media screen and (max-width: 1050px) {
    body:after {
        content: 'tablet';
        display: none;
    }
}

var mode = window.getComputedStyle(document.body,':after').getPropertyValue('content');