Question

如何更改JavaScript代码以查找input label的HTML background-color，而不必像在此代码段中那样手动将颜色插入JavaScript？

function ChangeColor(color) {
  var clrDiv = document.getElementsByClassName("colorDiv")[0];
  clrDiv.style.backgroundColor = color;
}

document.getElementById("select1").onclick = function() {
  ChangeColor("red");
}
document.getElementById("select2").onclick = function() {
  ChangeColor("green");
}
document.getElementById("select3").onclick = function() {
  ChangeColor("blue");
}

.colorDiv {
  width: 50px;
  height: 50px;
}

<section>
  <input id="select1" name="test" type="radio" />
  <label style="background-color:red;" for="select1">Red</label>
  <input id="select2" name="test" type="radio" />
  <label style="background-color:green;" for="select2">Green</label>
  <input id="select3" name="test" type="radio" />
  <label style="background-color:blue;" for="select3">Blue</label>
</section>
<footer>
  <div class="colorDiv"></div>
</footer>

Answer 1

这是你在找什么？而不是颜色，我传递选择的id，找到输入的标签，然后使用该标签的背景颜色来设置div背景颜色。

如果你没有使用jquery，这可以大大简化。

function findLableForControl(el) {
   var idVal = el.id;
   labels = document.getElementsByTagName('label');
   for( var i = 0; i < labels.length; i++ ) {
      if (labels[i].htmlFor == idVal)
           return labels[i];
   }
}

function ChangeColor(color) {
    var clrDiv = document.getElementsByClassName("colorDiv")[0];
    clrDiv.style.backgroundColor = findLableForControl(document.getElementById(color)).style.backgroundColor;;
}

document.getElementById("select1").onclick = function() { ChangeColor("select1"); }
document.getElementById("select2").onclick = function() { ChangeColor("select2"); }
document.getElementById("select3").onclick = function() { ChangeColor("select3"); }

.colorDiv{
	width:50px;
	height:50px;
}

<section>
    <input id="select1" name="test" type="radio" />
        <label style="background-color:red;" for="select1">Red</label>
    <input id="select2" name="test" type="radio" />
        <label style="background-color:green;" for="select2">Green</label>
    <input id="select3" name="test" type="radio" />
        <label style="background-color:blue;" for="select3">Blue</label>
</section>
<footer>
    <div class="colorDiv"></div>
</footer>

Answer 2

您可以通过以下几个简单步骤使代码更简单：

将onclick函数直接分配给ChangeColor，不需要中间匿名函数，也不需要传递任何内容。
在this函数中，使用input访问引发事件的元素（即您点击的querySelector）。
使用for功能按function ChangeColor() { var clrDiv = document.getElementsByClassName("colorDiv")[0]; clrDiv.style.backgroundColor = document.querySelector("label[for=" + this.id + "]").style.backgroundColor; } document.getElementById("select1").onclick = ChangeColor; document.getElementById("select2").onclick = ChangeColor; document.getElementById("select3").onclick = ChangeColor;属性选择关联的标签。

.colorDiv {
  width: 50px;
  height: 50px;
}

<section>
  <input id="select1" name="test" type="radio" />
  <label style="background-color:red;" for="select1">Red</label>
  <input id="select2" name="test" type="radio" />
  <label style="background-color:green;" for="select2">Green</label>
  <input id="select3" name="test" type="radio" />
  <label style="background-color:blue;" for="select3">Blue</label>
</section>
<footer>
  <div class="colorDiv"></div>
</footer>

#include<stdio.h>
#include<conio.h>
#include<malloc.h>
struct node
{
    int data;
    struct node *next,*prev;
};
struct node *head,*temp,*temp1;
void main(){
    int c=1;
    clrscr();
    while(c)
    {
        temp=(struct node*)malloc(sizeof(struct node));
        printf("enter the data for the node\n");
        scanf("%d",&temp->data);
        if(head==NULL){
            head=temp;
            head->next=NULL;
            head->prev=NULL;
        }
        else {
            head->next=temp;
            temp->prev=NULL;
            temp->next=NULL;
        }
        printf("for new node enter 1 otherwise 0\n");
        scanf("%d",&c);

    }
    temp1=head;
    while(temp1->next!=NULL){
        printf("%d",temp1->data);
        temp1=temp1->next;
    }
    getch();
}

通过查找输入背景颜色来更改div颜色

2 个答案: