从JS更改CSS不起作用

时间:2015-07-27 08:37:25

标签: javascript html css

所以我试图在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;
}

2 个答案:

答案 0 :(得分:0)

我注意到您正在使用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;
    }
}

答案 1 :(得分:-2)

我错过了分号:

var windowWidth = window.innerWidth;