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>

Но почему не работает setAttribute? Мне, должно быть, недостает чего-то очень простого, но для жизни меня я не могу представить, что это такое. Pure JS, пожалуйста, нет jQuery, нет MooTools, нет другой библиотеки.

Вот тест скрипку: enter link description here

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

Ассистентная страница вместо вашего элемента, вы можете прочитать бель ой учебник, чтобы изменить фон с помощью 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");