Question

我尝试改变课堂上所有元素的颜色，但是我有一个错误：

无法将undefined或null转换为对象

我有代码：

<div class="kolorek" onclick="changeColor('34495e');" style="background-color:#34495e;"></div>

function changeColor(color) {
    var block = document.getElementsByClassName('kafelek');
    with (block.style) {
        backgroundColor = "#" + color;
    }
};

Answer 1

由于getElementsByClassName将返回HTMLCollection，您必须循环浏览它们以设置颜色如下。

＆＃13;

function changeColor(color) {
        var block = document.getElementsByClassName('kafelek');
        for (var i = 0; i < block.length; i++) {
            block[i].style.backgroundColor = "#" + color;
        }
    };

＆＃13;

<div class="kolorek" onclick="changeColor('34495e');" style="background-color:#34495e;">Clickable Div</div>

<div class="kafelek">Another Div</div>

＆＃13;

注意：您可以使用onclick而不是内联addEventListener事件

Answer 2

首先，您正在搜索错误的元素，您可以使用element.style访问样式并更改backgroundColor，它应该是element.style.backgroundColor = color

检查此代码段

＆＃13;

function changeColor(color) {
  var block = document.querySelector('.kolorek');
  console.log(block.style);
  block.style.backgroundColor = "#"+color;
};

＆＃13;

<div class="kolorek" onclick="changeColor('999999');" style="background-color:#34495e;">sdfdsfds</div>

＆＃13;

希望这有帮助

Answer 3

首先，不推荐使用with，甚至禁止使用kafelek，因为严格模式下的es5（请参阅上面评论中发布的链接）。其次，您要定位kolorek作为其类的元素，但您在html中显示的类是function changeColor(color) { var block = document.getElementsByClassName('kolorek'); Array.prototype.forEach.call(block, function(el) { el.style.backgroundColor = '#' + color; } };。第三个错误是您尝试在HTMLCollection上设置属性，但这不存在。它存在于单个元素上。您需要将代码重构为以下内容：

class Person

  def initialize(@age : Int32) 

  end

end

使用css类更改所有元素的颜色

3 个答案: