將函數傳遞給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) { ... } 
});