gpt4 book ai didi

javascript - 内容和条件的屏幕宽度问题

转载 作者:行者123 更新时间:2023-11-27 23:40:50 25 4
gpt4 key购买 nike

欢迎,我对 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>

我想更改 firediv 中的内容,所以我使用了 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。有人可以向我解释为什么它不起作用吗?

最佳答案

使用 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>";
}
}

关于javascript - 内容和条件的屏幕宽度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57053335/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com