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プロパティに適用できますか？plzは詳細を明確にするのに役立ちます

4

2 に答える 2

1

jQuery の api ドキュメントによると、css 値として直接値の代わりに関数を渡すことが可能です。追加されたバージョン: 1.4 で追加されます。ドキュメントから：

.css( propertyName, function(index, value) )
propertyName
型: 文字列
CSS プロパティ名。

function(index, value)
タイプ: Function()
設定する値を返す関数。これが現在の要素です。セット内の要素のインデックス位置と古い値を引数として受け取ります。

基本的な考え方は、関数を値として使用する場合です。要素のインデックスと現在の値を動的計算の引数として関数を呼び出したり、特定の条件下で設定したりします。次に、計算または条件の後、値を返し、ターゲットの「propertyName」を設定します

例: Web サイトに大きなボタンがあり、ユーザーがボタンをクリックしたときに現在のフォント サイズを 2 倍にしたいとします。それを実現するために 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 に答える