添加屏幕大小的类时javascript不起作用

因此，它可以在我的网站的手机大小

div id="promo5" class="promo5"

只是不明白为什么它不会添加这个类，或者它添加了它，但仍然显示，我希望它不显示。当我在浏览器控制台上运行它时，它会工作，但在代码上不会。我已经检查了我的js文件是否有效，它是否有效。我是一个初学者，所以它可能是一些非常基本的东西

---

编辑：将措辞错误的if语句更改为else if，将viewportWidth变量移动到函数中，使用浏览器检查器检查，但仍然没有添加类。除非有人发现问题，否则将使用媒体查询

您正在类名中添加一个

。如果在CSS中引用类，例如

.promo5

，那么javascript应该是

d.className+=（“promo5 mobile”），不带

Edit:此外，正如尼古拉在回答中指出的那样，当页面加载时，您只需设置
viewportWidth
。调整页面大小时调用javascript函数，但不更新
viewportWidth
，因此函数的结果永远不会更改

编辑2:如果我可以问的话，为什么要使用Javascript隐藏元素而不是简单的CSS
@media
查询

在您的主要CSS中：

.promo5-mobile {
display: none;
}

您正在类名中添加一个
。如果在CSS中引用类，例如
.promo5
，那么javascript应该是
d.className+=（“promo5 mobile”），不带

Edit:此外，正如尼古拉在回答中指出的那样，当页面加载时，您只需设置
viewportWidth
。调整页面大小时调用javascript函数，但不更新
viewportWidth
，因此函数的结果永远不会更改

编辑2:如果我可以问的话，为什么要使用Javascript隐藏元素而不是简单的CSS
@media
查询

在您的主要CSS中：

.promo5-mobile {
display: none;
}

好的，这里有很多错误：

move
var viewportWidth=window.innerWidth
进入
mobileViewUpdate
功能。否则，其值在页面加载时设置一次

调用resize as
window.onresize=mobileViewUpdate
函数，无括号

正确的条件声明-在else之后没有括号

className不应在每次调整已经很小的窗口大小时都添加
Promobile
，如果将该类重新调整为中大，请不要忘记删除该类

这应该起作用：

#promo5 {
  display: none;
}

  @media (min-width: 700px) {
    #promo5 {
      display: block;
    }
  }

var d=document.getElementById（'promo5'）；
函数mobileViewUpdate（）{
var viewportWidth=window.innerWidth；
如果（视口宽度-1）{
d、 className=d.className.replace（“promo5 mobile”和“”）；
}
}
}
window.onload=mobileViewUpdate；
window.onresize=mobileViewUpdate；
好的，因此错误很多：

move
var viewportWidth=window.innerWidth
进入
mobileViewUpdate
功能。否则，其值在页面加载时设置一次

调用resize as
window.onresize=mobileViewUpdate
函数，无括号

正确的条件声明-在else之后没有括号

className不应在每次调整已经很小的窗口大小时都添加
Promobile
，如果将该类重新调整为中大，请不要忘记删除该类

这应该起作用：

#promo5 {
  display: none;
}

  @media (min-width: 700px) {
    #promo5 {
      display: block;
    }
  }

var d=document.getElementById（'promo5'）；
函数mobileViewUpdate（）{
var viewportWidth=window.innerWidth；
如果（视口宽度-1）{
d、 className=d.className.replace（“promo5 mobile”和“”）；
}
}
}
window.onload=mobileViewUpdate；
window.onresize=mobileViewUpdate；
它不起作用，因为您编写了错误的if/else语句。您应该使用else-if，而不是else-if，或者您可以在不使用（viewportWidth>=700）的情况下使用else。见下文：

var d = document.getElementById('promo5');

function mobileViewUpdate() {
    var viewportWidth = window.innerWidth;
    if ( viewportWidth <= 700 ) {
        if ( d.className.indexOf(" promo5-mobile") === -1 ) {
            d.className += (" promo5-mobile");
        }
    } else {
        if ( d.className.indexOf(" promo5-mobile") > -1 ) {
            d.className = d.className.replace(" promo5-mobile", "");
        }
    }
}

window.onload = mobileViewUpdate;
window.onresize = mobileViewUpdate;

编辑1：使用classlist而不是className。这将使您的javascript添加一个类。请参见以下内容：

var d = document.getElementById('promo5');

function mobileViewUpdate() {
    var viewportWidth = window.innerWidth;
    if ( viewportWidth <= 700 ) {
        if ( d.className.indexOf(" promo5-mobile") === -1 ) {
            d.className += (" promo5-mobile");
        }
    } else {
        if ( d.className.indexOf(" promo5-mobile") > -1 ) {
            d.className = d.className.replace(" promo5-mobile", "");
        }
    }
}

window.onload = mobileViewUpdate;
window.onresize = mobileViewUpdate;

函数mobileViewUpdate（）{
if（viewportWidth它不起作用，因为您编写了错误的if/else语句。您应该使用else if而不是else，或者您可以在不使用（viewportWidth>=700）的情况下使用else。请参阅以下内容：

var d = document.getElementById('promo5');

function mobileViewUpdate() {
    var viewportWidth = window.innerWidth;
    if ( viewportWidth <= 700 ) {
        if ( d.className.indexOf(" promo5-mobile") === -1 ) {
            d.className += (" promo5-mobile");
        }
    } else {
        if ( d.className.indexOf(" promo5-mobile") > -1 ) {
            d.className = d.className.replace(" promo5-mobile", "");
        }
    }
}

window.onload = mobileViewUpdate;
window.onresize = mobileViewUpdate;

编辑1：使用classlist而不是className。这将使您的javascript添加一个类。请参见以下内容：

var d = document.getElementById('promo5');

function mobileViewUpdate() {
    var viewportWidth = window.innerWidth;
    if ( viewportWidth <= 700 ) {
        if ( d.className.indexOf(" promo5-mobile") === -1 ) {
            d.className += (" promo5-mobile");
        }
    } else {
        if ( d.className.indexOf(" promo5-mobile") > -1 ) {
            d.className = d.className.replace(" promo5-mobile", "");
        }
    }
}

window.onload = mobileViewUpdate;
window.onresize = mobileViewUpdate;

函数mobileViewUpdate（）{
if（viewportWidth@FransB）查看Nikolay的答案。当页面加载时，您正在设置
viewportWidth
，然后再也不更新它。好的，谢谢，我将它移到函数中，它仍然显示div，有没有办法检查它是否添加了类。缩小窗口，右键单击元素并转到“检查元件"，看看它是否有类。我可以问一下为什么你使用Javascript而不是
@media
查询吗？@FransB那么为什么不在你的移动CSS中有一个
显示：无；
，然后在你的桌面版本中做一个
显示：块；
或
显示：内联；
？我使用了inspect元素，它没有添加class@FransB检查你t Nikolay的回答。当页面加载时，您正在设置<代码>视口宽度
，然后再也不更新它。好的，谢谢，我将它移到函数中，它仍然显示div，有没有办法检查它是否添加了类。缩小窗口，右键单击元素并转到“检查元素”，看看它是否有类。我可以问一下为什么你要使用Javascript而不是
@media
查询吗？@FransB那么为什么不在你的移动CSS中设置
显示：无；
，然后在你的桌面版本中设置
显示：块；
或
显示：内联；