Есть ли лучший способ изменить 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

Да. Теперь определим name1 и Имя2 каждый раз, когда все, что вам нужно сделать, это использовать что-то вроде toggleClass с соответствующими CSS

$(".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>

Answer 2

css() функция JQuery может обрабатывать объект пар ключ/значение за один раз: 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]); 

}