欢迎我遇到screen.width
条件的简单问题。
这是我的html代码:
<ul class="offer-image clearfix">
<li>
<figure class="figure-image bottom-left" >
<div id="fire">
<h3> lighting a fire!</h3>
-We Light a fire on evening<br>
-We are using only real wood<br>
-You will find the best pleaces for bonfire<br>
</div>
<img src="resources/img/fire-min.jpg" >
</figure>
</li>
我想更改fire
div中的内容,所以我使用了javascript:
if (screen.width > 650) {
document.getElementById("fire").innerHTML = "<h3> lighting a fire!</h3>";
} else if (screen.width < 650) {
document.getElementById("fire").innerHTML = "<h3> lighting a fire!</h3>-We Light a fire on evening<br> -We are using only real wood<br>-You will find the best pleaces for bonfire<br>";
}
主要问题应该很简单。当我刷新页面时,如果document.getElementById("fire").innerHTML
高于650,则内容将从screen.width
出现,并且不会更改其他内容。有人可以解释一下为什么它不起作用吗?
答案 0 :(得分:0)
screen.width返回用户屏幕的总宽度(以像素为单位),因此不会改变。您的情况应该改为window.innerWidth。
答案 1 :(得分:0)
使用window.innerWidth
代替screen.width
,第一个为您提供当前宽度,第二个为您提供原始屏幕宽度。
而且window.innerWidth
是静态值,因此,在屏幕宽度不断变化的情况下,请使用onresize侦听器,使内容保持动态:
window.onresize = function(){
if (window.innerWidth > 650) {
document.getElementById("fire").innerHTML = "<h3> lighting a fire! grater than 650</h3>";
} else if (window.innerWidth <= 650) {
document.getElementById("fire").innerHTML = "<h3> lighting a fire! less than 650 </h3>-We Light a fire on evening<br> -We are using only real wood<br>-You will find the best pleaces for bonfire<br>";
}
}