每次页面加载时加载不同的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＆amp;因为它总是返回一个唯一的div，不需要那个数组下标。

DEMO