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

【问题标题】：Getting or changing CSS class property with Javascript using DOM style使用 DOM 样式使用 Javascript 获取或更改 CSS 类属性
【发布时间】：2013-10-21 14:39:56
【问题描述】：

我的目标是更改表中列的背景颜色，而不是通过 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;
    }
}

【问题讨论】：

看看这个：api.jquery.com/css
@shylo 的回答是正确的，getElementsByClassName 返回一个数组，里面肯定没有“style”属性

标签： javascript css dom

【解决方案1】：

根据按下的按钮将颜色更改为标签按钮非常有用。我集成了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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

这对我帮助很大。这对我正在做的事情非常有用，我学到了一些新东西。谢谢。

【解决方案4】：

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

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

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

【讨论】：

这工作简单而漂亮。我添加了一些参数以使其更加模块化。对帖子进行了编辑以进行格式化。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

您不需要添加“。”在你的班级名称中。这样就可以了

document.getElementsByClassName('col1')

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

这是一个工作示例

http://jsfiddle.net/J9LU8/

【讨论】：

哦，亲爱的！它不能解决我的主要问题，但谢谢！从现在开始，我将更改它并以这种方式引用类。
谢谢！ jsfiddle 和你们都很棒！

【解决方案7】：

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

【讨论】：