[英]Screen.width problem with content and conditions
歡迎,我對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
並且如果screen.width
大於650的情況下,其他內容都不會更改。有人可以解釋一下為什么它不顯示工作?
screen.width返回用戶屏幕的總寬度(以像素為單位),因此不會改變。 在您的情況下,應改為window.innerWidth 。
使用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>";
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.