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>

我真的没有任何线索为什么上面的代码工作。谁能解释将函数传递给属性的优点和缺点？也就是这种传递函数的方法适用于所有其他css属性和非css属性？ plz帮助详细说明

Answer 1

根据jQuery的api文档，传递函数而不是直接值作为css值是可能的。它在添加的版本中添加：1.4。来自文件：

.css（propertyName，function（index，value））
   propertyName的的
  类型：字符串
  CSS属性名称。

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

基本思想是，当你使用函数作为值时。它将使用元素索引和当前值作为动态计算的参数调用函数，或者在某些条件下设置。然后在计算或条件之后，返回它的值以设置目标“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选择的每个特定元素的详细信息（{{1} }告诉你，以及index）。

因此，例如，如果您想使每个this的背景颜色变暗，无论起始颜色如何，您都可以编写代码来获取旧值并降低亮度（不是琐碎但不是超级难度））。你发布的这个例子是另一个很好的例子：它使元素大20％（好吧，它使宽度和高度增大20％;我想这意味着该区域变大了44％）。

在<div>方法的简单情况下，函数可以用作值：

.css()

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

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

你可以混合搭配：

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

将函数传递给css属性

2 个答案: