将函数传递给css属性

Question

是否可以将函数作为值传递给所有css属性？ 请参考这里的代码：

<script> 
    $("div").click(function() { 
    $(this).css({ 
     width: function(index, value) { 
     return parseFloat(value) * 1.2; 
     }, 
     height: function(index, value) { 
     return parseFloat(value) * 1.2; 
     } 

    }); 
    }); 
</script> 

我真的没有任何线索，为什么上面的代码是working.Can谁能解释的优势，以及通过功能性的缺点同样是通过FUNC 重刑适用这种方法到所有其他CSS属性和非CSS属性？ plz帮助详细说明

Answer 1

根据AP我从jQuery文件，传递函数，而不是直接值，因为CSS值是可能的。它在添加的版本中添加：1.4。 从文献：

的CSS（propertyName的，函数（指数，值））
propertyName的
类型：String
甲CSS属性名称。

函数（指数，值）
类型：Function（）
的函数返回到设定的值。这是当前的元素。接收集合中元素的索引位置和旧值作为参数。

基本思想是，当你使用函数作为价值。它将调用具有元素索引和当前值的函数作为动态计算的参数或在某些条件下设置。然后在计算或条件之后，返回值以设置目标“propertyName”

例如：您可以认为网站中有一个较大的按钮，并且您希望用户在单击时将当前字体大小加倍按钮。你可以使用API​​来实现这一点。另外，我不认为你可以将多个函数传递给css方法作为值。

工作的例子：http://jsfiddle.net/BUyp9/1/

HTML

<input type="button" value="larger size" id="enlargeBtn" /> 
<div id="content"> 
Hello world.  
</div> 

的JavaScript

$("#enlargeBtn").on('click', function(){ 
    $("#content").css('font-size', function(index, value) { 
     var size = parseInt(value, 10); 
     return size*2; 
    }); 
}); 

Answer 2

它允许您根据旧值（这是value参数包含的内容）或基于jQuery选择的每个特定元素的细节（这是index告诉的内容你，以及this）。例如，如果您想让每个<div>的背景颜色变暗，而不考虑起始颜色，则可以编写代码以取旧值并减小亮度（不是微不足道的，但也不是超困难的）。你发布的这个例子是另一个很好的例子：它使元素大20％（它使宽度和高度增大20％;我想这意味着该区域增大44％）。

$('something').css("background-color", function(index, value) { ... }); 

或者，如在例如，函数可以在传递给方法的对象的属性的值：：

函数可以在.css()方法的简单情况下被用作值

$('something').css({ 
    "background-color": function(index, value) { ... }, 
    "width": function(index, value) { ... }, 
    // ... 
}); 

你可以混合和匹配：

$('something').css({ 
    "height": "100px", 
    "z-index": function(index, value) { ... } 
});