所以我试图在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;
}
答案 0 :(得分:0)
我注意到您正在使用document.getElementById("header")
,但您的CSS定义为header {...}
。在第一种情况下,您的代码按ID搜索,在第二种情况下,它按标记名搜索。
除非您的标题同时使用标题标记和标题ID(<header id="header">...</header>
),否则您可能会使用其中一个错误:
document.getElementsByTagName(tagname)
代替。#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;