add/remove class 屏幕尺寸变化

Question

我有一个使用 Bulma CSS 框架和原始 Javascript 的项目。我需要删除移动屏幕尺寸上的“is-pulled-right”class，但是只有第一个元素响应脚本，其他元素被忽略。我做错了什么？

window.addEventListener("resize", function () {

    const classList = document.getElementById("isRight").classList
    
    if(window.innerWidth < 820) {   
        classList.remove("is-pulled-right")
    } 

    else{
        classList.add("is-pulled-right");
    }

});

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" rel="stylesheet"/>
<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">First Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">Second Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

Answer 1

javascript 文件，如果您想在 window

上添加超过 1 个事件，您可以使用事件监听器

const div = document.getElementById("isRight")

window.onresize = function(){
    if(window.innerWidth < 820) {   
        div.classList.remove("is-pulled-right")
    } else {
        div.classList.add("is-pulled-right");
    }
}

Answer 2

拥有多个重复 ID 是不好的做法。因为它们应该是独一无二的。这就是为什么 document.getElementById(id); 只有 returns 一个元素。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

请改用class。然后用 https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

如果没有办法删除 ID，那么应该这样做：

Array.from(document.querySelectorAll('#isRight')).map(e => e.classList).forEach(classlist => {
    // your classlist logic
})

Answer 3

1 - id ("isRight") 在 html 中应该是唯一的。你应该使用 class 而不是 id .

2 - 您可以将 document.querySelectorAll(".is-pulled-right") 用于 select 所有具有 is-pulled-right class 的元素，而不是 document.getElementById("isRight")

    const classList = document.querySelectorAll(".is-pulled-right")
    
window.addEventListener("resize", function () {

    if(window.innerWidth < 700) {   
        classList.forEach( item => {
        item.classList.remove("is-pulled-right")})
    } 
 
    else{
      console.log('more')
        classList.forEach( item => {
        item.classList.add("is-pulled-right")})
    }
});

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" rel="stylesheet"/>
<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">First Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

<section class="section">

  <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <h3 id="isRight" class="subtitle is-3 is-pulled-right ">Second Title:</h3>
      </div><!-- column left-->
      <div class="column">
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
      </div><!-- column right -->
    </div><!-- columns -->
  </div><!-- container -->
  
</section>

add/remove class 屏幕尺寸变化

add/remove class on screen size changes

javascript

css

removechild

screen-size

bulma