创建要在CSS中使用的JavaScript元素

Question

我正在使用jQuery为我的主页创建一个小的JavaScript API。 在代码的稍后部分，我将通过以下方式将包含css的对象附加到元素：$（element）.css（theVariable）;

例如，结果应等于以下CSS代码：

 h3 { background-color: rgb(0, 80, 0); background-color: rgba(0, 80, 0.75); } 

原因显然是具有透明的颜色，但也可以在不支持“ rgba（）”的旧版浏览器中使用。

我将如何填充theVariable，以便调用css（theVariable）时的效果与上面的css代码相同？ 我不能使用类似

 theVariable = {}; theVariable['backgroundColor'] = 'rgb(0, 80, 0)'; theVariable['backgroundColor'] = 'rgba(0, 80, 0, 0,3)'; 

由于RGBA值将始终覆盖RGB值。

有什么办法可以避免这个问题？

Answer 1

我建议您在JavaScript中执行相反的操作。 您不知道浏览器是否支持rgba ，您可以执行以下操作：

theVariable = {};
theVariable['backgroundColor'] = 'rgba(0, 80, 0, 0,3)';
if(!theVariable['backgroundColor']) // Browser without support will return undefined
  theVariable['backgroundColor'] = 'rgb(0, 80, 0)';

Answer 2

我建议使用Modernizr检查旧版浏览器缺少的各种功能。 然后，在您的情况下，CSS将如下所示：

.no-rgba h3 {
    rgb(0, 80, 0);
}
.rgba h3 {
    rgba(0, 80, 0, 0.3);
}

请看这个小提琴 。