使用一个CSS类

我试图改变颜色在类的所有元素的所有元素改变颜色，但我有一个错误：使用一个CSS类

Cannot convert undefined or null to object

我有代码：

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

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

来源

2016-12-22 Aristov

'DIV CLASS = “kolorek”'和'document.getElementsByClassName（ 'kafelek'）' –

有一个'HTMLCollection'没有'.style'财产。 –

_不建议使用with语句，因为它可能是令人困惑的错误和兼容性问题的根源。有关详细信息，请参阅下面“说明”部分中的“歧义对比”段落._此处：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/with – baao

由于getElementsByClassName将返回HTMLCollection，您必须遍历它们才能设置颜色，如下所示。

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

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

 
<div class="kafelek">Another Div</div>

注意：除了内嵌onclick事件，您可以使用addEventListener代替

来源

2016-12-22 20:18:56 Aruna

“事件”对象isn在所有浏览器中都可以全局使用。如果给函数添加一个参数，并在属性调用中传递完整的单词“event”，它就会起作用。 –

它也只会改变被点击的元素背景颜色，但问题要求改变给定类别的所有元素的背景颜色 – baao

非常感谢！ :) – Aristov

首先，你正在寻找错误的元素，你可以通过使用element.style访问风格并改变backgroundColor它应该是element.style.backgroundColor =颜色

检查这段代码

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

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

希望这有助于

来源

2016-12-22 20:19:31 Geeky

OP不一定要改变被点击的元素，并提到改变所有其中，暗示循环。 –

首先，使用with不是推荐的，因为严格模式ES5甚至禁止（见我张贴在评论上面的链接）。其次，您将目标定位为kafelek作为他们的类，但是您在html中显示的类是kolorek。第三个错误是您尝试在HTMLCollection上设置属性，但不存在。它存在于一个单一的元素上。你需要重构代码以下：

function changeColor(color) { 
    var block = document.getElementsByClassName('kolorek'); 
    Array.prototype.forEach.call(block, function(el) { 
     el.style.backgroundColor = '#' + color; 
    } 
};

来源

2016-12-22 20:21:12 baao

使用一个CSS类

回答

相关问题