僅在 getElementsByName 中更改 CSS 屬性

埃莉安娜·洛佩茲

尋找一種通過某些名稱更改 CSS 屬性的方法。

下面我有一個使用複選框的示例。有兩種類型通常是相同的，除非 changeSpecialCheckBox() 在其參數中出現真值。

文件.css

.checkBoxApperance {
    width: 100px;
    height: 50px;
    background: 'dark-blue';
}

文件.html

<!--regularCheckBox-->
<div class="checkBoxApperance">
   <input type="checkbox" id="regularCheckBox1" name="regularCheckBox"/>
</div>
<div class="checkBoxApperance">
   <input type="checkbox" id="regularCheckBox2" name="regularCheckBox"/>
</div>
<div class="checkBoxApperance">
   <input type="checkbox" id="regularCheckBox3" name="regularCheckBox"/>
</div>

<!--specialCheckBox-->
<div class="checkBoxApperance">
   <input type="checkbox" id="specialCheckBox1" name="specialCheckBox"/>
</div>
<div class="checkBoxApperance">
   <input type="checkbox" id="specialCheckBox2" name="specialCheckBox"/>
</div>
<div class="checkBoxApperance">
   <input type="checkbox" id="specialCheckBox3" name="specialCheckBox"/>
</div>

文件.js

function changeSpecialCheckBox(condition)
{
  if(condition) {
    document.getElementsByName("specialCheckBox").forEach(elem => {
      elem.disabled = true;
      $('.checkBoxApperance').css("background-color" , "light-blue"); //change the appearance
                                                                     //of all checkboxes
                                                                     //instead of all checkboxes under
                                                                     //the "specialCheckBox" name
      });
  }
}

星展銀行

如果您使用 jQuery 設置樣式，那麼您可以使用$("[name='name']")直接選擇元素，而不是將 jQuery 與 vanilla JS 結合使用getElementsByName()。通過這種方式，您可以鏈接操作以僅將更改應用於相關的元素選擇，如下所示：

// You can run this inside the function/condition you want
$("[name='specialCheckBox']") // Selects the elements with the matching name
  .prop("disabled", true) // Sets the disabled property
  .closest(".checkBoxApperance") // Finds the parent div
  .css("background-color", "lightblue") // Applies the new style to the parent

.checkBoxApperance {
  width: 100px;
  height: 50px;
  background: darkblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--regularCheckBox-->
<div class="checkBoxApperance">
  <input type="checkbox" id="regularCheckBox1" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
  <input type="checkbox" id="regularCheckBox2" name="regularCheckBox" />
</div>
<div class="checkBoxApperance">
  <input type="checkbox" id="regularCheckBox3" name="regularCheckBox" />
</div>

<!--specialCheckBox-->
<div class="checkBoxApperance">
  <input type="checkbox" id="specialCheckBox1" name="specialCheckBox" />
</div>
<div class="checkBoxApperance">
  <input type="checkbox" id="specialCheckBox2" name="specialCheckBox" />
</div>
<div class="checkBoxApperance">
  <input type="checkbox" id="specialCheckBox3" name="specialCheckBox" />
</div>