如何通过Javascript更改html td背景颜色？

Question

<style type="text/css">
    td.a{
        background: yellow
    }
</style>

<table><td class="a"></td></table>

上面是一个html / css代码段。从中，您可以知道td部分的背景颜色为黄色。

后来，我添加了一个html选择下拉组件。我希望在选择另一个选择下拉值时将背景颜色从黄色更改为蓝色。但我不知道该怎么做。

这应该是与通过Javacript更改css相关的问题。它与此How to change HTML background with JavaScript Function?非常相似，但你可以看到我的td组件没有id，它只是有类。

希望有人可以帮助我，谢谢。

Answer 1

假设您想要更改单元格背景的颜色（我假设您不仅仅有一个），则为newColor;

var tds = document.getElementsByClassName('a');
for (var x = 0; x < tds.length; x++) {
  tds[x].style.background = newColor;
}

Answer 2

用于更改具有类名

的所有元素

var elements = document.getElementsByClassName("a");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor="blue";
}

或者更改单个元素，只要您知道它的位置。

var elements = document.getElementsByClassName("a");
elements[positon].style.backgroundColor="blue";//in your example position would be 0

如果您为元素指定了ID，则可以使用以下

document.getElementById("idforelement").style.backgroundColor = "blue";