Question

我的目标是更改表中列的背景颜色，而不是按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中得到大致相同的错误：

无法读取Undefined属性'backgroundColor'。

我觉得它与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;
    }
}

Answer 1

正如Quynh Nguyen所说，你不需要＆＃39;。＆＃39;在className中。但是 - document.getElementsByClassName（＆＃39; col1＆＃39;）将返回一个对象数组。

这将返回＆＃34; undefined＆＃34;值因为数组没有类。你仍然需要遍历数组元素...

function changeBGColor() {
  var cols = document.getElementsByClassName('col1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blue';
  }
}

Answer 2

您无需添加'。'在你的班级名称中。这样做

document.getElementsByClassName('col1')

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

这是一个工作示例

http://jsfiddle.net/J9LU8/

Answer 3

也许更好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

Answer 4

尼斯。谢谢。为我工作。

不知道为什么你加载了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>

Answer 5

我认为这不是最佳方法，但就我而言，其他方法无效。

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

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

的示例

Answer 6

如果您要从后端发送颜色数据

def color():
    color = "#{:06x}".format(random.randint(0, 0xFFFFFF))
    return color

Answer 7

根据按下的按钮更改选项卡按钮的颜色非常有用。我集成了 this 字

<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>

使用DOM样式使用Javascript获取或更改CSS类属性

7 个答案: