elements.style.backgroundColor 返回 undefined [重复]答案

【问题标题】：elements.style.backgroundColor returns undefined [duplicate]elements.style.backgroundColor 返回 undefined [重复]
【发布时间】：2020-06-05 14:33:39
【问题描述】：

我正在尝试使用 javascript 来查看一个类是否具有特定的背景颜色，但每次我尝试某些东西时它总是返回未定义。我已经尝试了很多东西，所以我在这里不知所措。

CSS

.ChangeColors {
    background-color: #ff801b;
    color:black;
}

Javascript

function ChangeColors(){
    var all = document.getElementsByClassName('ChangeColors');
    if (all.style.backgroundColor == "#ff801b") {
        for (var i = 0; i < all.length; i++) {
          all[i].style.color = 'white';
          all[i].style.backgroundColor = 'blue';
        }
    } else {
        for (var i = 0; i < all.length; i++) {
          all[i].style.color = 'black';
          all[i].style.backgroundColor = '#ff801b';
          console.log(help)
        }
    }
}

【问题讨论】：

getElementsByClassName 返回 HTMLCollection 的数组，所以你可以做 all[index] 并尝试一下。
如果您只需要在预定义的颜色之间切换，那么这不应该通过遍历所有相关元素并检查它们的颜色来完成，而是通过更改共同祖先元素的类来完成，并让您的样式表完成所有其余的工作。

标签： javascript css

【解决方案1】：

您也可以使用 jQuery 来实现如下所示的实用功能

var color = $('.ChangeColors').css( "background-color" );

现在将您的值与 color 进行比较，它不应返回 undefined

【讨论】：

【解决方案2】：

有 3 个问题。

getElementsByClassName 返回HTMLCollection 的列表
style 属性用于获取和设置元素的内联样式。

<div style="color: red;"></div>

您的元素没有内联 stlye 属性。所以element.style.backgroundColor 不起作用。
element.style.backgroundColor 并不总是返回 HEX 颜色，即使您设置了 HEX 颜色。在某些浏览器上，它返回 RGB 颜色。

这是一个糟糕的方法。但是，如果您喜欢它，请使用window.getComputedStyle(element)["background-color"]，如果它是RGB，则将其转换为十六进制颜色，然后进行比较。

function ChangeColors() {
  var elements = document.getElementsByClassName('change-color');
  for (let element of elements) {
    var background = window.getComputedStyle(element)["background-color"]
    console.log(background)
  }
}
ChangeColors()

.change-color {
  background-color: ##ff801b;
}

<div class="change-color">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste deserunt officia voluptatum earum laboriosam? Est, ipsam. Ex veniam, incidunt, alias quasi aliquam sit eaque recusandae, expedita fugiat possimus a corrupti.
</div>

您可以使用两个类来应用颜色和背景。

function ChangeColors() {
  var elements = document.getElementsByClassName('change-color');

  for (let element of elements) {
    if (element.classList.contains("bg-blue")) {
      element.classList.add('bg-orange');
    } else {
      element.classList.add('bg-blue')
    }
  }
}

ChangeColors()

.bg-blue {
  background: blue;
  color: white;
}

.bg-orange {
  background: #ff801b;
  color: black;
}

<div class="change-color">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste deserunt officia voluptatum earum laboriosam? Est, ipsam. Ex veniam, incidunt, alias quasi aliquam sit eaque recusandae, expedita fugiat possimus a corrupti.
</div>


<div class="change-color bg-blue">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste deserunt officia voluptatum earum laboriosam? Est, ipsam. Ex veniam, incidunt, alias quasi aliquam sit eaque recusandae, expedita fugiat possimus a corrupti.
</div>

阅读这些以了解更多信息。

getElementsByClassName

Window.getComputedStyle()

How to compare a backgroundColor in Javascript?

style.backgroundColor doesn't work?

如果你使用 jQuery。

How can I compare two color values in jQuery/JavaScript?

【讨论】：

【解决方案3】：

您可以使用单独的类来更改 CSS 属性，例如

.ChangeColors {
 width: 100%;
 height: 100px;
 margin: 10px;
 color: black;
}

.orangecolor {
  background-color: #ff801b;
 }

.bluecolor {
 background-color: blue;
 color:white;
 }

并且可以根据需要循环遍历节点和添加/删除类

   function ChangeColors() {
     var all = document.querySelectorAll(".ChangeColors");
     for (var i = 0; i < all.length; i++) {
     if (all[i].classList.contains("orangecolor")) {
        all[i].classList.add("bluecolor");
     } else {
       all[i].classList.add("orangecolor");
    }
  }
 }

检查fiddle

【讨论】：

【解决方案4】：

如果您不想使用整个 jQ 库，您可以使用 getComputedStyle().

let all = document.querySelectorAll(".ChangeColors");

function ChangeColors() {
  for (let i = 0; i < all.length; i++) {
    const { style } = all[i];
    if (
      window.getComputedStyle(all[i], false).backgroundColor ===
      "rgb(255, 128, 27)"
    ) {
      style.color = "white";
      style.background = "blue";
    } else {
      style.color = "black";
      style.background = "#ff801b";
    }
  }
}

这是一个例子https://codesandbox.io/s/eager-feistel-16l4m

【讨论】：