如何用Javascript改变CSS样式

How to alter CSS styles with Javascript?

本文关键字：CSS 样式 改变 Javascript 何用      更新时间：2023-09-26

我有一个这样的数组:

var colors = {
1: '#FFFF00',
2: '#FF0000',
3: '#80FF00',
4: '#00FFFF',
5: '#FF00FF'
};

和这样的Javascript:

var color = Math.floor(Math.random()*5)+1;
if(color == document.getElementById('awards').style.borderColor) {
    var color = Math.floor(Math.random()*5)+1;
}
else {
document.getElementById('awards').style.borderColor = color;
}

您正在生成索引，但没有对数组进行下标。

jsFiddle .

另外，为了吹毛求疵，{}创建了一个具有属性的对象，技术上不是Array(尽管Array 是对象)。[]是JavaScript中Array的文字表示法。

更新

如果有帮助的话，我可能会这样写…

var getRandomColor = function() {
    var colors = [
        '#FFFF00',
        '#FF0000',
        '#80FF00',
        '#00FFFF',
        '#FF00FF'
        ];
    return colors[Math.floor(Math.random() * colors.length) + 1];
}
var color = getRandomColor(),
    element = document.getElementById('awards'),
    borderColor = element.style.borderColor;
if (color == borderColor) {
    color = getRandomColor();
}
else {
    element.style.borderColor = color;
}

jsFiddle .

您并没有真正获得随机颜色，只是在一个范围内获得随机数，您需要将代码更改为:

var color = colors[(Math.floor(Math.random() * 5) + 1).toString()];
if(color == document.getElementById('awards').style.borderColor) {
    var color = colors[(Math.floor(Math.random() * 5) + 1).toString()];
}
else {
    document.getElementById('awards').style.borderColor = color;
}

如果您想编写动态CSS并在其中编写一些代码和逻辑，我建议您查看http://www.dotlesscss.org/
我知道这需要时间来学习，但我提出要提一下，可能会对别人有所帮助。

相关文章：