如何针对“换入场输入：检查”用JavaScript对CSS属性进行更改

Question

JavaScript如何更改输入的CSS属性：检查

css

   .switch-field input:checked + label {
    background-color: #018786;
    color:white;
    box-shadow: none;
} 

我想说我想更改其背景颜色 -

js

document.getElementsByClassName("switch-field input:checked")[0].style.background= #4400ff; 

我如何才能定位该特定的特定特定”类“输入检查”？

Answer 1

说明

基本上您需要遵循的步骤

1. 清楚所有标签背景样式属性
2. 选择所有输入：检查 +标签（那是具有背景颜色属性的元素）
3. 循环通过所有获取的标签
4. ，背景颜色是您想要的

gotcha意识到

1. 通过JavaScript更改背景属性的内容，不会在未选中输入时自动更改它
2. 。 onChange事件，以确保其在检查输入

建议

1. 时正确设置背景，请使用CSS 输入：检查 + Label 和input + input + label classe要添加您的背景，
2. 请始终尝试避免使用JavaScript操纵样式，它违反justnument，如果可以避免

解决方案

，通常被认为是不良练习

function clickHandle() {
  // Clear all the labels background style property to ensure it resets to the css class background property
  clearLabelBackground();

  // Get all the labels (not input) based on the css input:checked flag
  // We are getting the label because that if the element which has the background color property you want to change
  var selectedLabels = document.querySelectorAll("input:checked + label");
  
  // Loop through each of the fetched labels
  selectedLabels.forEach((label)=>{
    
    // Change the background color style
    label.style.background="#4400ff"; 

  });
}

function clearLabelBackground() {
  // Get all the labels (not input) regardless of the selection
  // We are getting the label because that if the element which has the background color property you want to change
  var selectedLabels = document.querySelectorAll("input + label");
  
  // Loop through each of the fetched labels
  selectedLabels.forEach((label)=>{
    
    // Remove the background color style
    label.style.background=""; 

  });

}

.switch-field input:checked + label {
    background-color: #018786;
    color:white;
    box-shadow: none;
}

<div class="switch-field">
  <input type="checkbox"/>
  <label>Item 1</label>
</div>
<div class="switch-field">
  <input type="checkbox"/>
  <label>Item 2</label>
</div>
<div class="switch-field">
  <input type="checkbox"/>
  <label>Item 3</label>
</div>
<div class="switch-field">
  <input type="checkbox"/>
  <label>Item 4</label>
</div>

<button onclick="clickHandle()">Change BG</button>

我已经评论了JavaScript代码，如果您需要更多澄清，请随时评论此答案

Answer 2

您可以将QuerySelector用于单个元素或QuerySelectorAll用于多个元素。您可以在其中使用CSS查询。

document.querySelector("switch-field input:checked").style.background = 
 "#4400ff";