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

像这样：

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

Answer 2

jQuery的css()函数可以在一次调用中处理键/值对的对象：http://api.jquery.com/css/#css-properties

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

}

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

2 个答案: