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

Question

我正在尝试动态更改文档中给定元素的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');

我的问题是

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

Answer 1

是.现在,每当你需要做的就是使用类似toggleClass和适当的CSS 时,你就定义了name1和name2

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

像这样:

$(function() {
  $("#click").on("click",function() {
    $(".img").toggleClass("name1 name2");
  });
});

.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);
}
.name2 {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="click">Click</span>
<div class="img name1">Hello</div>