javascript - 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 元素的不同背景，而不是生成为 < p > & nbsp; 的 p 元素。</p>

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

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

Answer 1

好吧，该setAttribute功能并没有像您认为的那样做。

如果您检查 jsfiddle 中的元素，您会看到：

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

这绝对不是你想要的。你想要的是这样的：

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

所以它会变成

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

Answer 2

backgroundColor不是 HTML 元素的属性。您可以使用bgcolor，但使用 CSS 会更好。

您可以像这样向节点添加一个类：

d[i].className += " myClass";

然后设置一个CSS规则

.myClass
{
  backgroundColor: "red"

}

或者，如果您坚持将其硬连线到您可以使用的 DOM

d[i].style.backgroundColor =  "red"

Answer 3

Assming Page 而不是您的元素，您可以阅读以下教程以通过 javascript 更改背景：

http://codeforbrowser.com/blog/changeing-background-color-using-javascript-and-jquery/

<script type="text/javascript">
        function changebackground() {
            var colors = ["#0099cc","#c0c0c0","#587b2e",
"#990000","#000000","#1C8200","#987baa","#464646",
"#AA8971","#1987FC","#99081E"];

            setInterval(function() {
                var bodybgarrayno = Math.floor(Math.random() * colors.length);
                var selectedcolor = colors[bodybgarrayno];
                document.body.style.background = selectedcolor;
            }, 3000);
        }
        </script>

Answer 4

你必须这样做：

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].style.background ='red';
    }
}

或者

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("style", "background-color:red;");
    }
}

http://jsfiddle.net/3Lze5/6/

Answer 5

采用：

d[i].style.setProperty("background", "red");

代替

d[i].setAttribute("backgroundColor", "red");