36

我的目标是更改表中列的背景颜色，而无需通过 ID 或名称单独处理每个数据条目。我知道有几种方法可以做到这一点，确切地说，我尝试了 3 种，但每种方法都有问题。为了简单明了，在这个问题中，我问的是如何使用DOM 中的element.style.backgroundColor对象成功地做到这一点。这是我的 HTML：

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="tester.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript" src="tester.js"></script> 
    </head>
    <body>
    <button type="button" onClick="testerFunction()">Test</button>
        <table>
            <tr>
                <th class="col1">Column 1 Header</th>
                <th class="col2">Column 2 Header</th>
            </tr>
            <tr>
                <td class="col1">R1 C1</td>
                <td class="col2">R1 C2</td>
            </tr>
            <tr>
                <td class="col1">R2 C1</td>
                <td class="col2">R2 C2</td>
            </tr>
        </table>
     </body>
 </html>

我的 CSS 文件：

.col1{
    background-color:lime;  
}

还有我的 Javascript 文件：

function testerFunction() {
    alert (document.getElementsByClassName('.col1').style.backgroundColor);  
}

当我运行它时，我在 IE、Firefox 和 Chrome 中得到大致相同的错误：

无法读取未定义的属性“背景颜色”。

我感觉它与document.getElementsByClassName DOM 对象返回的数据类型有关。引用的网站说它返回一个 HTMLcollection。我发现的其他地方说它返回元素的“列表”。我尝试创建一个数组并将结果分配给数组并使用循环访问数组中的每个元素，但在同一个地方得到了同样的错误。可能我只是不知道如何处理“收藏”。无论如何，我期待的是“石灰”或十六进制或 rgb 等价物，因为这是我在 CSS 文件中定义的。我希望能够用 Javascript 更改它。任何帮助将非常感激。谢谢！

编辑：为 Shylo Hana 的答案添加了参数以使其更加模块化

function testerFunction() {
    changeColumnColor('col1','blue');
}
function changeColumnColor(column,color) {
    var cols = document.getElementsByClassName(column);
    for(i=0; i<cols.length; i++) {
      cols[i].style.backgroundColor = color;
    }
}
4

7 回答 7

74

正如 Quynh Nguyen 所说，您不需要“。” 在类名中。但是 - document.getElementsByClassName('col1') 将返回一个对象数组。

这将返回一个“未定义”值，因为数组没有类。您仍然需要遍历数组元素...

function changeBGColor() {
  var cols = document.getElementsByClassName('col1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blue';
  }
}
于 2013-10-14T04:15:36.700 回答
17

我认为这不是最好的方法，但在我的情况下，其他方法不起作用。

stylesheet = document.styleSheets[0]
stylesheet.insertRule(".have-border { border: 1px solid black;}", 0);

来自https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript的示例

于 2019-06-04T15:20:19.813 回答
4

您无需添加“。” 在你的班级名称中。这会做

document.getElementsByClassName('col1')

此外，由于您尚未通过 javascript 定义背景颜色，因此您将无法直接调用它。您必须使用 window.getComputedStyle() 或 jquery 来实现您在上面尝试做的事情。

这是一个工作示例

http://jsfiddle.net/J9LU8/

于 2013-10-14T04:01:28.137 回答
4

也许更好document.querySelectorAll(".col1")，因为getElementsByClassName它在 IE 8 中不起作用并且querySelectorAll确实如此（尽管仅 CSS2 选择器）。

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

于 2013-10-14T04:16:29.400 回答
3

好的。谢谢你。为我工作。

不知道为什么你加载了 jQuery。它没有被使用。我们中的一些人仍然使用具有带宽限制的拨号调制解调器和卫星。越少越好。

<script>
        function showAnswers(){
          var cols = document.getElementsByClassName('Answer');
          for(i=0; i<cols.length; i++) {
            cols[i].style.backgroundColor = 'lime';
            cols[i].style.width = '50%';
            cols[i].style.borderRadius = '6px';         
            cols[i].style.padding = '10px';
            cols[i].style.border = '1px green solid';
            }
        }
        function hideAnswers(){
          var cols = document.getElementsByClassName('Answer');
          for(i=0; i<cols.length; i++) {
            cols[i].style.backgroundColor = 'transparent';
            cols[i].style.width = 'inheret';
            cols[i].style.borderRadius = '0';
            cols[i].style.padding = '0';
            cols[i].style.border = 'none';          
          }
        }
    </script>
于 2014-06-27T02:12:30.280 回答
0

根据按下的按钮将颜色更改为选项卡按钮非常有用。我与 thisword融为一体

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
        
        
<button class='btn btn-secondary' onclick='myFunction2(this,"red");openCity("Rome")' style="background-color: red;"><strong>ROME</strong></button> 
<button class='btn btn-secondary' onclick='myFunction2(this,"red");openCity("Berlin")'><strong>BERLIN</strong></button>
    
<div id='Rome' class='city' >Welcome to Rome</div>
<div id='Berlin' class='city' >Welcome to Berlin</div>
        
     <script>   
        function openCity(cityName) {
            var i;
            var x = document.getElementsByClassName('city');
            for (i = 0; i < x.length; i++) {
              x[i].style.display = 'none';
            }
            document.getElementById(cityName).style.display = 'block';
          }
        
          function myFunction2(elmnt,clr) {
          var classes = document.getElementsByClassName('btn-secondary');
          for(i = 0; i < classes.length; i++) {
            classes[i].style.backgroundColor = 'grey';
          }
          elmnt.style.backgroundColor = clr;
          }
        </script>
于 2021-07-27T13:14:18.303 回答
-1

如果您正在寻找从后端发送颜色数据

def color():
    color = "#{:06x}".format(random.randint(0, 0xFFFFFF))
    return color
于 2020-10-27T18:29:11.290 回答