仅在 getElementsByName 中更改 CSS 属性

Posted 2023-05-08

【中文标题】仅在 getElementsByName 中更改 CSS 属性

【英文标题】：Change CSS property only in getElementsByName

【发布时间】：2022-01-05 14:57:42

【问题描述】：

寻找一种通过某些名称更改 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，为什么还要使用 getElementsByName()？您可以使用 jQuery 选择器选择该名称，然后将 style/disabled 属性应用于该选择。

【参考方案1】：

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

【参考方案2】：

在这种情况下，您可以简单地使用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>

【参考方案3】：

 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>