构建JavaScript对象以与jQuery .css（）一起使用（重复键怎么办？）
我使用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参数来解决大多数浏览器问题。
具有相同名称的多个密钥无效，并将在严格模式下生成错误。
创建一个应用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
我的建议是将CSS放入其自己的类中的样式表中，而只需将该类添加到元素中。 浏览器本身将确定它支持哪些background-image属性，因此只会渲染该属性。
CSS
.gradient-bg { background-color: #000; background-image: -webkit-linear-gradient(top, #000, #fff); background-image: linear-gradient(top, #000, #fff) }
jQuery的
$(".element").addClass("gradient-bg");
您需要创建一个自定义的$.cssHooks （ 更多信息 ），通过执行各种测试来确定哪一个是正确的forms – 或者您可以使用带有$.fn.addClass的css类。
对于大多数属性，github上有一个cssHooks存储库。 编写自己的钩子很棘手，很多边缘情况。
https://github.com/brandonaaron/jquery-cssHooks
对于背景图像渐变，您需要：
https://github.com/brandonaaron/jquery-cssHooks/blob/master/gradients.js
看起来你暗示.css()方法就像.css文件中的CSS属性一样。 我不认为它是那样的。 但这里有几个替代方案：
-
使用浏览器嗅探（为什么不呢？你已经使用供应商前缀做多浏览器CSS）
-
使用链接为
标记的实际样式表 -
创建
标记并动态添加规则。
-
使用样式属性：
$('#my').attr('style', 'background: ...; bakground: ...; border-radius: ...; -moz-border-radius: ...;');