Загрузите разные CSS каждый раз, когда страница загружается

Question

Я пытаюсь сделать что-то очень похожее на JSFiddle, найденный здесь, http://jsfiddle.net/Pp5up/, где каждый раз, когда страница загружает изменения цвета фона.

Проблема, с которой я сталкиваюсь, заключается в том, что приведенный выше пример изменяет фон тела. Я пытаюсь изменить цвет фона div каждый раз, когда страница загружается. Я пробовал несколько часов, но просто не могу заставить его работать правильно. Вот мой код: http://jsfiddle.net/Pp5up/11/

HTML

<div id="nm-single-product-bg"> 
Test 
</div> 

CSS

#nm-single-product-bg.style1 {background:red;} 
#nm-single-product-bg.style2 {background:blue;} 
#nm-single-product-bg.style3 {background:black;} 

JS

var rand = Math.floor((Math.random()*3)+1); 
var style = "style" + rand; 
document.getElementsById("nm-single-product-bg")[0].className+=style 

Если кто-то может помочь, я буду так благодарен!

Answer 1

Изменение этой линии

document.getElementsById("nm-single-product-bg")[0].className+=style 

к этому

document.getElementById("nm-single-product-bg").className+=style 

Причина этого уже упоминалось в комментариях :)

ID является уникальным для каждого элемента, поэтому его getElementById вместо getElementByIds &, поскольку он всегда возвращает один уникальный div, без необходимости в этом индексе массива.

DEMO