javascript javascript更改元素背景

javascript change element background

提问by flish

This is the HTML

这是 HTML

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

This is the JavaScript

这是 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");
    }
}

(Obviously) I can do what I want to do - different background for p elements that contain some text as opposed to p elements which are generated as < p > & nbsp; < /p >

（显然）我可以做我想做的事情 - 包含一些文本的 p 元素的不同背景，而不是生成为 < p > & nbsp; 的 p 元素。</p>

But why doesn't the setAttribute work? I must be missing something very simple, but for the life of me I cannot imagine what it is. Pure JS please, no jQuery, no MooTools, no other library.

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

Here is the test fiddle: enter link description here

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

回答by alestanis

Well, the setAttributefunction doesn't do what you think it does.

好吧，这个setAttribute函数并没有像你想象的那样做。

If you inspect the elements in your jsfiddle, you see this:

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

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

and this is definitelynot what you want. What you want is something like this:

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

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

so it will transform into

所以它会变成

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

回答by Ben McCormick

backgroundColorisn't an attribute on HTML elements. You can use bgcolor, but its really better to do this with CSS.

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

You can add a class to the node like this:

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

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

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

and then set a CSS rule

然后设置一个 CSS 规则

.myClass
{
  backgroundColor: "red"

}

Or if you insist on hardwiring it to the DOM you can use

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

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

回答by defau1t

Assming Page instead of your element, you can read the below tutorial to change the background via javascript:

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

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

http://codeforbrowser.com/blog/changed-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>

回答by Thomas Durieux

You must do that:

你必须这样做：

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';
    }
}

or

或者

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/

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

回答by Guern

Use:

利用：

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

Instead of

代替

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