Javascript 有没有更好的方法动态更改css属性

我正在尝试动态更改文档中给定元素的CSS属性，我当前的解决方案如下：

function changeEffect(element,choice){

  var effects = {};

  effects.name1  = {"-webkit-box-shadow" : "7px 13px 21px -1px rgba(0,0,0,0.5)",
                      "-moz-box-shadow"     : "7px 13px 21px -1px rgba(0,0,0,0.5)",
                      "box-shadow"          : "7px 13px 21px -1px rgba(0,0,0,0.5)"
                     },
  effects.name2  = {"-webkit-filter"    : "drop-shadow(5px 5px 5px #222)",
                        "filter"            : "drop-shadow(5px 5px 5px #222)"                       
                       };


  for(i in effects[choice]){
    if(effects[choice].hasOwnProperty(i)){
       // using jquery to easily apply changes
       $(element).css(i,effects[choice][i]);
    }

  }                       
}

例如，如果我想将效果name1应用于类img的所有元素，那么代码是：

changeEffect('.img','name1');

我的问题是

对于类似的任务，有没有更好的解决方案

---

对。现在，每当您需要做的只是将类似的东西与适当的CSS结合使用时，就可以定义name1和name2

$(".img").toggleClass("name1 name2");

像这样：

$（函数（）{
$（“#单击”）。在（“单击”，函数（）{
$（“.img”）.toggleClass（“name1 name2”）；
});
});
.name1{
-网络工具包盒阴影：7px 13px 21px-1px rgba（0,0,0,0.5）；
-moz盒阴影：7px13px21px-1pxrgba（0,0,0,0.5）；
盒影：7px13px21px-1pxRGBA（0,0,0,0.5）；
}
.姓名2{
-webkit过滤器：投影（5px 5px 5px#222）；
过滤器：投影（5px 5px 5px#222）；
}

点击
Hello
jQuery的
css（）
函数可以在一次调用中处理键/值对的对象：

投票赞成结束，因为这主要是基于意见的。我认为你的解决方案很好。代码本身就说明了问题。所以不要改变。其他人也会有其他的解决方案，可能效率更高或更低。通常你定义的object.properties会在CSS样式表中定义，应该做一个测试，看看哪一个更有效。是的@maioman你是对的我也这样做
function changeEffect(element,choice){

  var effects = {};

  effects.name1  = {"-webkit-box-shadow" : "7px 13px 21px -1px rgba(0,0,0,0.5)",
                      "-moz-box-shadow"     : "7px 13px 21px -1px rgba(0,0,0,0.5)",
                      "box-shadow"          : "7px 13px 21px -1px rgba(0,0,0,0.5)"
                     },
  effects.name2  = {"-webkit-filter"    : "drop-shadow(5px 5px 5px #222)",
                        "filter"            : "drop-shadow(5px 5px 5px #222)"};

  $(element).css(effects[choice]);

}