passing function to css property

Question

Is it possible to pass function as a value to all the css property? Refer the code here:

    <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>

I really dont have any clue why the above code is working.Can anyone explain advantages as well as disadvantages of passing function to properties?Also is this method of passing func tion applicable to all other css properties and non-css properties? plz help clarify in detail

@GrantThomas is it possible to assign function to non-css property? — Maizere Pathak.Nepal
– Maizere Pathak.Nepal, Commented Mar 7, 2013 at 15:53

Derek · Accepted Answer · 2013-03-07 16:09:52Z

According to the api document from jQuery, passing function instead of directly value as css value is possible. It is added in version added: 1.4. From the document :

.css( propertyName, function(index, value) )
propertyName
Type: String
A CSS property name.

function(index, value)
Type: Function()
A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

The basic idea is, when you use function as value. It will call the function with the element index and current value as argument for dynamic computation or set under some conditions. Then after compute or condition, return values for it to set the target "propertyName"

For example: You can think there is a larger button in your web site and you would like the user double size the current font size when clicked the button. You can make use of api to achieve that. In addition, I don't think you can pass multiple function to css method as value.

Working example on : 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;
    });
});

Pointy · Accepted Answer · 2013-03-07 16:02:54Z

0

It lets you set a new value based on the old value (which is what the value parameter contains), or based on the details of each particular element of the jQuery selection (which is what index tells you, as well as this).

So for example, if you wanted to make the background color of each <div> darker regardless of starting color, you could write code to take the old value and decrease the lightness (not trivial but not super-difficult either). The very example you posted is another good one: it's making the elements 20% bigger (well it's making the width and height 20% bigger; I guess that means the area gets 44% bigger).

Functions can be used as values in the simple case of the .css() method:

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

Or, as in your example, functions can be the values of properties in an object passed to the method:

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

You can mix and match:

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

edited Mar 7, 2013 at 16:02

answered Mar 7, 2013 at 15:43

Pointy

415k62 gold badges600 silver badges632 bronze badges

6 Comments

Maizere Pathak.Nepal Over a year ago

but the function is meant to be passed to css() method not the property

Pointy Over a year ago

@Maizere ?? the function is the value in the object, so jQuery will call the function when it's acting on the .css() update request. It's not "passed" to the property; it's the value of the property.

Maizere Pathak.Nepal Over a year ago

is this method applicable to non-css property as well?

Maizere Pathak.Nepal Over a year ago

can we pass multiple function to css method?Really getting confused

Pointy Over a year ago

Your sample code is passing an object to the .css() method. That object has named properties corresponding to the CSS properties to be set. Those properties can have values that are either the actual values for jQuery to assign to the CSS properties, or they can be functions. If jQuery sees that a property value is a function, it calls the function and uses its return value as the actual CSS property value. It's that simple.

|

Collectives™ on Stack Overflow

passing function to css property

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related