Javascript 从JS更改CSS不起作用

因此，我试图在window.innerWidth大于750px的条件下更改元素的css属性。我用Javascript做这件事，但是我有一些困难

我看不到代码中有任何错误，所以有人对它可能是什么有任何建议吗

以下是我的工作内容：

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

下面是标题的CSS代码，我想为其添加高度条目：

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

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

除非您的标题同时使用了标题标记和标题ID…，否则您可能使用了其中一个错误：

如果要使用JS按标记名选择元素，则需要改用document.getElementsByTagname标记名。 如果您想用CSS按ID选择一个元素，则需要使用头{…}。 此外，您的案例回避了一个问题：为什么要使用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;
    }
}

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

#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;
    }
}

---

我漏掉了一个分号：

---

var windowWidth=window.innerWidth

如果它进入内部吗？我用其他html检查过，它工作正常。。因此，您可以检查html中是否有标头为id的元素。。但是你说没有错误，一切正常：也许你应该在别处寻找问题。@Abhitalks我将编辑我的问题，以显示我试图编辑的标题的css。@dwinbrown:这也起作用了：。一个建议，请尝试一下你正在做的任何事情，并进行测试。您将立即识别出哪里出了问题：规则意味着在这种情况下没有什么区别；missingI现在已经把它拿出来了，只是用if window.innerWidth<750还没有working@ArminBleiholder-从对该问题的评论中链接到一个测试用例-它表明它在正常环境下工作，即使缺少分号。是的，你是对的-在这种情况下，分号是不必要的。可能是因为已经需要指定高度，即不能通过JS添加css行吗？@dwinbrown:你可以使用类似document.styleSheets[0].insertRule的内容将任何css规则添加到页面中。document.getElementByIdheader.style.height=100vh；应该也能工作，如注释中的JSFIDLE所示。但是，对于这个用例来说，这不是正确的方法。你应该考虑使用媒体查询！