JavaScript-更改输入标签颜色？

Question

我想通过 JavaScript 更改输入标签的颜色。我对列表项执行相同的操作并选择输入。他们都工作得很好。但是，当我以相同的方式编写标签时，它不会改变标签的颜色。我的代码不正确吗？或者是否有另一种方法以类似的方式完成此任务？

我的代码:

    //Highlights current page from submenu- This works
    link = document.getElementById("<?php echo "$link";?>");  
    link.style.background = "#CCCCCC";
    link.style.color = "#3385D6";
    link.style.fontWeight = "bold";     
    link.style.border = "1px solid";
    link.style.borderColor = "#BBBBBB";

    //Highlights current submenu tab
    subbtn = document.getElementById("<?php echo "$subTab";?>");
    subbtn.checked= true;   
    //Doesn't work
    subbtn.style.background = "#CCCCCC";
    subbtn.style.color = "#3385D6";
    subbtn.style.fontWeight = "bold";   

我的 HTML:

<input type="radio" id="reveal-email">
<li><label for="reveal-email" >Tab that i want to change</label></li>

Answer 1

根据您使用的 checked 属性，我猜测 subbtn 是一个 input type="checkbox"或输入 type="radio"。因此，您根本没有设置标签的颜色和背景，这是一个单独的元素。

如果您的 HTML 在标签内部有输入(通常是这种情况)，那么:

var parentStyle = subbtn.parentNode.style;
parentStyle.background = "#CCCCCC";
parentStyle.color = "#3385D6";
parentStyle.fontWeight = "bold";

实例:

var subbtn = document.getElementById("subbtn");
var parentStyle = subbtn.parentNode.style;
parentStyle.background = "#CCCCCC";
parentStyle.color = "#3385D6";
parentStyle.fontWeight = "bold";

<label>
  <input type="checkbox" id="subbtn"> This is the label
</label>

(您添加的 HTML 表明您正在使用 for，因此请参见下文。)

如果您的 HTML 将它们通过与复选框的 id 匹配的 label 上的 for 属性分隔和链接，则第一行略有变化:

var parentStyle = document.querySelector('label[for="' + subbtn.id + '"]').style;

实例:

var subbtn = document.getElementById("subbtn");
var parentStyle = document.querySelector('label[for="' + subbtn.id + '"]').style;
parentStyle.background = "#CCCCCC";
parentStyle.color = "#3385D6";
parentStyle.fontWeight = "bold";

<input type="checkbox" id="subbtn">
<label for="subbtn">This is the label</label>

如果您没有以任何一种方式链接它们，则应该这样做，这样单击标签就会切换复选框。