javascript更改元素背景

Question

这是HTML

<p>texjksdgfjl sdjfg sjdfg</p>
<p>&nbsp;</p>
<p>texjksdgfjl sdjfg sjdfg</p>
<p>&nbsp;</p>
<p>texjksdgfjl sdjfg sjdfg</p>

这是JavaScript

var d = document.getElementsByTagName("p"); 

for (var i=0;i<d.length;i++)
{ 
    var text = d[i].textContent;

    if (text.length===1){
        d[i].style.background ='blue';
    }
    else {
        d[i].setAttribute("backgroundColor", "red");
    }
}

（显然）我可以做我想做的-与包含<p>＆nbsp;生成的p元素相反，包含某些文本的p元素的背景不同。</ p>

但是为什么setAttribute不起作用？我一定错过了一些非常简单的东西，但是对于我的一生，我无法想象它是什么。请使用纯JS，没有jQuery，没有MooTools，没有其他库。

这是测试小提琴：在此处输入链接描述

Answer 1

好的，该setAttribute功能无法实现您认为的功能。

如果检查jsfiddle中的元素，则会看到以下内容：

... <p backgroundcolor="red" ...>

而这绝对不是您想要的。您想要的是这样的：

setAttribute("style", "background-color: red;");

所以它会变成

... <p style="background-color: red;" ...>