僅在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
      });
  }
}

uj5u.com熱心網友回復：

如果您使用 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>

uj5u.com熱心網友回復：

在這種情況下，您可以簡單地使用Node.parentNode來定位元素的父'specialCheckBox'元素：

function changeSpecialCheckBox(condition) {
  if (condition) {
    document.getElementsByName('specialCheckBox').forEach(elem => {
      elem.disabled = true;
      elem.parentNode.style.background = 'lightblue'
    })
  }
}

changeSpecialCheckBox(1)

.checkBoxApperance {
  width: 100px;
  height: 30px;
  background-color: darkblue;
}

<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>

uj5u.com熱心網友回復：

 const checkBoxApperanceElemnts =
      document.getElementsByClassName("checkBoxApperance");
    for (var i = 0; i < checkBoxApperanceElemnts.length; i  ) {
      const root = checkBoxApperanceElemnts[i];
      const el = root.querySelectorAll('[name="specialCheckBox"]');
      if (el[0]) {
        root.style.background = "red";
      }
    }

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

<html>
  <bod>
    <!--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>
    <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>
  </body>
 </html>

標籤：javascript html 查询 css

上一篇：如何在沒有迭代的情況下撰寫SQL查詢

下一篇：我有一個函式，我需要知道它何時回傳true而不是false