如何在特定的屏幕分辨率范围发生时追加一次html元素

How to append html element one time when specific screen resolution range occurs?

本文关键字：追加 元素 html 一次 范围 分辨率 屏幕      更新时间：2023-09-26

我的html:

<div id="log">
</div>
我jQuery: 

$(function() {
    var win = $(window);
    resizeHandler();
    win.resize(resizeHandler);
    function resizeHandler() {
        if (win.width() <= 700) {            
                $("#log").append("<div>" + "success" + "</div>");
        }       
    }
});

我希望当出现特定的屏幕分辨率范围时，<div>success</div>元素将在"log"div元素中显示一次。例如:从1像素到700像素的屏幕分辨率，成功必须在"log"div元素中显示一次，当屏幕分辨率超出1像素到700像素的范围时，必须从"log"div元素中删除<div>success</div>。代码应该是什么样的?

$(function() {
  var win = $(window);
  resizeHandler();
  win.resize(resizeHandler);
  function resizeHandler() {
    if (win.width() >= 700) {
      if ($('#log').children().length == 0)
        $("#log").append("<div class='suc'>" + "success" + "</div>");
    } else {
      $('.suc').remove();
    }
  }
});

如果你真的想添加一个元素。但是，我也会使用媒体查询，并隐藏/显示所需的元素…

根据评论中提供的信息，您需要一个简单的媒体查询。不需要JS。如果这是你真正需要做的，那么@nevermind的答案是完美的。

就像这样修改你的代码。

HTML: 

<div id="log">
  <div id="success">Success</div>
</div>
CSS: 

#success {
  display: none;
}
@media only screen and (max-width: 700px) {
  #success {
    display: block;
  }
}

您可以创建一个布尔变量，并在追加时将其设置为true+在你的resizeHandler中创建一个else语句来处理其他屏幕尺寸

但是在现实世界的例子中，我可以通过使用CSS mediaqueries来解决这个问题。

相关文章：