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;

从JS更改CSS不起作用

2 个答案: