构建JavaScript对象以与jQuery .css()一起使用(重复键怎么办？)

Question

我使用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参数来解决大多数浏览器问题.

Answer 1

具有相同名称的多个密钥无效,并将在严格模式下生成错误.

创建一个应用你的属性的函数/插件cssObj.如果找到字符串对,请设置具有所需值的CSS属性.
如果找到数组,则循环遍历它,并使用每个值更新属性.如果找到无效值,则忽略该值.

演示:http://jsfiddle.net/RgfQw/

// 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);