Load unterschiedliche CSS jedes Mal eine Seite lädt

Question

Ich versuche, etwas sehr ähnlich zu dem JSFiddle hier gefunden, http://jsfiddle.net/Pp5up/, wo jedes Mal eine Seite lädt die Hintergrundfarbe ändert.

Das Problem, mit dem ich mich befinde, ist, dass das obige Beispiel den Hintergrund des Körpers ändert. Ich versuche, die Hintergrundfarbe eines Div jedes Mal zu ändern, wenn eine Seite geladen wird. Ich habe es stundenlang versucht, aber es scheint einfach nicht funktionieren zu können. Hier ist mein Code: 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 

Wenn jemand helfen kann, wäre ich so dankbar!

Answer 1

Ändern Sie diese Zeile

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

dieser

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

Die Ursache hierfür bereits in den Kommentaren erwähnt :)

ID ist für jedes Element einzigartig, so dass ihr getElementById statt getElementByIds & da es immer ein eindeutiges div zurückgibt, keine Notwendigkeit für dieses Array tiefgestellt.

DEMO