用javascript在屏幕大小上添加类不起作用

adding class on screen size with javascript not working

本文关键字：添加 不起作用 javascript 屏幕      更新时间：2023-09-26
var d = document.getElementById('promo5');
var viewportWidth = window.innerWidth;

function mobileViewUpdate() {
if (viewportWidth <= 700) {
    d.className += (" .promo5-mobile");
}else (viewportWidth >= 700) {
    d.className += ("");
}
}

window.onload = mobileViewUpdate();
window.onresize = mobileViewUpdate();

将类添加到此div

div id="promo5" class="promo5"

所以它可以在我的网站的移动大小上

.promo5-mobile {
display: none;
}

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

EDIT：将措辞错误的if语句更改为else-if，在函数内部移动了viewportWidth变量，与浏览器检查器进行检查，它仍然没有添加类。将使用媒体查询，除非有人发现问题。

好的，所以错误很多：

  1. 将CCD_ 1移动到CCD_。否则，它的值在页面加载时设置一次。

  2. 将函数的大小调整为window.onresize = mobileViewUpdate，无括号

  3. 正确的条件声明-其他后面没有括号

  4. className不应该在每次调整窗口大小时都添加promo5-mobile，因为窗口已经很小了，如果将其调整回中大型，请不要忘记删除该类

这应该有效：

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;

它不起作用，因为您写错了if/else语句。您应该使用else-if而不是else，或者您可以使用不带(viewportWidth>=700(的else。见下文：

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

    function mobileViewUpdate() {
if (viewportWidth <= 700) {
    d.classList.add("promo5-mobile");
} else {
    d.classList.remove("promo5-mobile");
    }
}

您正在类名中添加一个.。如果您在CSS中将类引用为.promo5-mobile，那么您的javascript应该是d.className += (" promo5-mobile");，而不是.。

编辑：此外，正如Nikolay在回答中所指定的，您仅在加载页面时设置viewportWidth。调整页面大小时，您正在调用javascript函数，但没有更新var viewportWidth = window.innerWidth;0，因此函数的结果永远不会改变。

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

在您的主CSS中：

#promo5 {
  display: none;
}
  @media (min-width: 700px) {
    #promo5 {
      display: block;
    }
  }
相关文章：