從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;