从JS更改CSS不起作用

Question

所以我试图在window.innerWidth大于750px的条件下更改元素的css属性。 我正在使用Javascript执行此操作，但是遇到了一些困难。

我看不到代码中的任何错误，因此有人对它可能有什么建议吗？

这是我正在使用的：

window.addEventListener("resize", function(){
    if (window.innerWidth > 750) {
        document.getElementById("header").style.height = "100vh";   
    } else {
        //do nothing   
    }
});

这是我要为其添加height条目的标头的CSS代码：

header {
    text-align: center;
    color: #fff;
    background: #18bc9c;
}

Answer 1

我注意到您正在使用document.getElementById("header") ，但您的CSS定义为header {...} 。 在第一种情况下，您的代码按ID搜索，在第二种情况下，其按标记名搜索。

除非您的标头同时使用标头标记和标头ID（ <header id="header">...</header> ），否则您可能会使用以下两种错误之一：

• 如果要使用JS通过标记名选择元素，则需要改用document.getElementsByTagName(tagname) 。
• 如果要通过CSS通过ID选择元素，则需要改用#header {...} 。

---

另外，您的案例引出了一个问题，为什么要使用Javascript来执行此操作！ 您为什么不只使用媒体查询？ 您应该始终避免使用Javascript做这种事情！

媒体查询是根据屏幕宽度更改样式的默认方法 。 它们提供最佳性能，并具有强大的浏览器支持。

如果要按ID选择，请尝试以下代码：

#header {
    text-align: center;
    color: #fff;
    background: #18bc9c;
    height: auto;
}

@media screen and (min-width: 751px) {
    #header {
        height: 100vh;
    }
}

如果要按标记名选择，请尝试以下代码：

header {
    text-align: center;
    color: #fff;
    background: #18bc9c;
    height: auto;
}

@media screen and (min-width: 751px) {
    header {
        height: 100vh;
    }
}

Answer 2

我错过了分号：

var windowWidth = window.innerWidth;