Question

我正在尝试更改<td>文件中.html的颜色。这是我所拥有的，但由于某种原因它似乎没有起作用。

我的.html文件：

<table>
    <tr id = "table_row">
        <td>Computers</td>
        <td>Price</td>
        <td>Location</td>
   </tr>
</table>

现在我的.js文件：

function changeBorderColor() {
    var table = document.getElementById("table_row").getElementsByTagName("td");
    table.style.borderColor = "red";
}

激活<td>功能时，为什么我的changeBorderColor()不会改变颜色？提前感谢任何提示和帮助！

Answer 1

getElementsByTagName()方法将返回与标记选择器匹配的元素数组。所以你需要通过迭代来改变每个元素：

简单示例：

function changeBorderColor() {
    var table = document.getElementById("table_row").getElementsByTagName("td");
    for(var i=0; i<table.length; i++) {
        var td = table[i];
        td.style.borderColor = "red";
    }
}

Answer 2

.getElementsByTagName("td")返回NodeList，您必须遍历每个td并分别指定border。

您还需要指定borderWidth和borderStyle属性。

＆＃13;

function changeBorderColor() {
  var td = document.getElementById("table_row").getElementsByTagName("td");
  for (i = 0; i < td.length; i++) {
    td[i].style.borderColor = "red";
    td[i].style.borderWidth = "1px";
    td[i].style.borderStyle = "solid";
  }
}
changeBorderColor()

＆＃13;

<table>
  <tr id="table_row">
    <td>Computers</td>
    <td>Price</td>
    <td>Location</td>
  </tr>
</table>

＆＃13;

Answer 3

你可以在这里使用一些Jquery。例如：

function changeBackground(){

$("td").css("border","2px solid red");

}

Answer 4

如果允许使用jQuery，这里有一个稍微详细的例子：

$('#table_row td').each(function(index){

   //Do something with each result. In this case - add a border
   $(this).css({ 'border': '1px solid red' });

});

这是jQuery示例的小提琴：http://jsfiddle.net/k3d6peLy/

或者，如果你不必担心在IE8之前支持任何东西，你也可以使用JavaScript的'querySelectorAll（）'方法：

var elements = document.querySelectorAll('#table_row td');

for(var i = 0; i < elements.length; i++){
    elements[i].style.border = '1px solid red';
}

以下是'querySelectorAll（）'示例的小提琴：http://jsfiddle.net/k3d6peLy/1/

如何更改使用JavaScript的边框颜色？

4 个答案: