构建用于jQuery.css（）的JavaScript对象（关于重复键呢？）

我使用jQuery的

.css（）

方法将样式应用于元素。我是这样做的：

var cssObj = {
    'background-color' : '#000',
    'background-image': '-webkit-linear-gradient(top,#000,#fff)',
    'background-image': 'linear-gradient(top,#000,#fff)'
};

$(".element").css(cssObj);

这样做的问题是，显然我在对象中使用了重复的关键点，这并不酷

---

我怎样才能解决这个问题？我需要将具有重复名称的CSS参数传递给大多数浏览器。

您似乎暗示

.CSS（）

方法与.CSS文件中的CSS属性类似。我不认为它是这样工作的。但这里有几个替代方案：

使用浏览器嗅探（为什么不呢？您已经在使用供应商前缀进行多浏览器CSS）

使用链接为

标记的实际样式表

动态创建

标记并向其添加规则

使用样式属性：

$（'#my'）.attr（'style'，'background:…；bakground:…；border radius:…；-moz border radius:…）

---

您需要创建一个自定义的

$.cssHooks

（），以确定哪一个是正确的表单，

---

通过进行各种测试，或者您可以使用带有

$.fn.addClass

的css类，我的建议是将css放入自己类的样式表中，只需将该类添加到元素中即可。浏览器本身将确定它支持哪一个

背景图像

属性，因此只渲染该属性

CSS

jQuery

$(".element").addClass("gradient-bg");

---

具有多个同名密钥是无效的，并且将在严格模式下生成错误

创建一个应用

cssObj

属性的函数/插件。如果找到字符串对，请使用所需的值设置CSS属性。
如果找到数组，则循环遍历它，并使用每个值更新属性。如果发现无效值，将忽略该值

演示：

//为项目可移植性创建了一个插件
（函数（$）{
$.fn.cssMap=函数（映射）{
var$元素=此；
$.each（映射、函数（属性、值）{
if（数组的值实例）{
对于（var i=0，len=value.length；i大多数属性在github上都有一个CSSHook存储库。编写自己的钩子很棘手，有很多边缘案例


对于背景图像渐变，您需要：

浏览器检测脚本如何？这会起作用，但不是一个好的解决方案…@FishBasketGordo让我们问问他对浏览器检测的看法\o/颜色值是真实脚本中的变量，所以这个脚本不会顺利工作。从我在jQuery文档中读到的内容来看，它应该可以工作。请参见.css（map）关于伟大的罗布！工作起来很有魅力！THXGreat Response，不错的技术。添加到收藏中供日后使用。尝试了一下，效果很好，除了Safari 5.0之外，出于某种原因…？@Owen我已经在Safar 4.0.5、5.0.1和5.1.2中对其进行了测试。这些看起来不错：（截图）@OwenHoskins这是因为答案中的语法仅在Safari 5.1中受支持。在Safari 4-5.0中，
-webkit gradient（线性、左上、左下、颜色停止（0%、#000）、颜色停止（100%、#fff））
将起作用。在Safari 4.0之前，甚至不支持渐变。这里有一个更新的小提琴，它包括所有浏览器的渐变：（必须使用的IE9-除外）。
$(".element").addClass("gradient-bg");

// Created a plugin for project portability
(function($){
    $.fn.cssMap = function(map){
        var $element = this;
        $.each(map, function(property, value){
            if (value instanceof Array) {
                for(var i=0, len=value.length; i<len; i++) {
                    $element.css(property, value[i]);
                }
            } else {
                $element.css(property, value);
            }
        });
    }
})(jQuery);

// Usage:
var cssObj = {
    'background-color': '#000',
    'background-image': ['-webkit-linear-gradient(top,#000,#fff)',
                         'linear-gradient(top,#000,#fff)']
};
$(".element").cssMap(cssObj);