Javascript 更改显示属性和id属性

我有两个部分：

<section class="notes animate" id="need" style="background:#fff; height:900px; padding-top:70px;">
 <!--stuff --->
</section>

<section class="focus" id="need" style="display:none;">
 <!--stuff --->
</section>

我想在窗口降低到小于1043px的宽度时显示第二部分。并通过

display:none

更新：

---

当宽度小于1043时，如何删除第一节的id属性？

您应该使用CSS媒体查询。您可以在此处阅读更多信息：

例如：

@media only screen and (max-width: 1043px) {
    section.focus {
      display: block;
    }
}

---

首先，不能对多个div使用相同的ID。因此，请更改一个div的ID。 要隐藏第二个div并显示第一个div：

使用CSS：

@media only screen and (max-width: 1043px) {
  .focus {
    display: block;
  }
  .notes {
    display: none;
  }
 }

---

为了响应删除ID属性的要求，请尝试以下JavaScript。它只能做一次，但是，如果你感兴趣的性能，你应该考虑调查反跳/节流的大小调整处理程序。（）

$（窗口）.on（'resize'，function（））{
如果（$（窗口）.width（）<1043）{
$（'.notes'）.removeAttr（'id'）；
$（窗口）.off（'resize'）；
}
});

---

但是，媒体查询答案是基于屏幕宽度显示/隐藏的正确方法。

使用媒体查询。

id

属性必须是unique@AndFisher这对我来说无关紧要。当宽度小于1043时，我想删除第一节的id属性，并保持第二节的id attr不变。如果您可以在问题中指定为什么需要删除id属性，那么也许您可以编写一些JavaScript来执行此操作。+1用于提及唯一的id，OP还需要删除

显示的内联样式。此外，他们还需要在媒体查询之外反转显示属性耶，我很感谢你的评论@AndFisher:）
$(window).on('resize', function() {
    if($(window).width() < 1043) {
        $('.notes').removeAttr('id');
        $(window).off('resize');
    }
});