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元素生成为＆lt; p> ＆安培; NBSP; ＆LT; / p＆gt;

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

以下是测试小提琴：enter link description here

Answer 1

backgroundColor不是HTML元素的属性。您可以使用bgcolor，但使用CSS执行此操作确实更好。

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

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

然后设置CSS规则

.myClass
{
  backgroundColor: "red"

}

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

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

Answer 2

嗯，setAttribute函数没有按照您的想法执行。

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

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

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

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

所以它会变成

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

Answer 3

分配页面而不是您的元素，您可以阅读以下教程以通过javascript更改背景：

http://codeforbrowser.com/blog/changing-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");

javascript更改元素背景

5 个答案: