Question

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

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

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

原因显然是具有透明色，但也适用于不支持“rgba（）”的旧版浏览器。

如何填充myVariable，以便调用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);
}

请参阅this fiddle。

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

2 个答案: