4

是否可以将函数作为值传递给所有 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 属性？请帮助详细说明

4

2 回答 2

1

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

.css(propertyName, function(index, value) )
propertyName
类型：字符串
CSS 属性名称。

function(index, value)
类型：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;
    });
});
于 2013-03-07T15:58:45.133 回答
0

它使您可以根据旧值（value参数包含的内容）或基于 jQuery 选择的每个特定元素的详细信息（以及index告诉您的内容）设置新值this。

因此，例如，如果您想让每个背景颜色<div>变暗而不管起始颜色如何，您可以编写代码来获取旧值并降低亮度（不是微不足道但也不是超级困难）。您发布的示例是另一个很好的示例：它使元素变大了 20%（它使宽度和高度变大了 20%；我想这意味着该区域变大了 44%）。

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

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

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

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

您可以混合搭配：

$('something').css({
  "height": "100px",
  "z-index": function(index, value) { ... }
});
于 2013-03-07T15:43:30.383 回答