CSS Hooks – jQuery

jQuery lets you a way to write down your own custom CSS methods. CSS Hooks directly into jQuery to override custom properties. I think you have written so many time in your website for different location. Isn’t it?

$(“div”).css(“margin”, “0px 1px 2px 3px”);

But using CSS Hooks, you can easily add the above code to jQuery.

Warning: CSS Hooks were added in jQuery 1.4.3 so prior that version jQuery will not work.

Lets do one thing, split the user’s input into 4 values into array.
var directions = [“Top”, “Right”, “Bottom”, “Left”];

Now define our new “margin” hook with two methods, get and set:

$.cssHooks.margin = {
    get: function(elem, value) {
      var res = [];
      $.each(directions, function(i, dir) {
        res.push($.css(elem, "margin" + dir));
      });
      return res.join(" ");
    },
    set: function(elem, value) {
      $.each(value.split(" "), function(i, val) {
        elem.style["margin + directions[i]"] = val;
      });
    }
};

set method takes two arguments: the element to set the CSS properties on, and the value the user passed.

So in our case this will be a string of values, eg “0px 1px 2px 3px”. So we split the values at a space, and loop over them.

And get method will do the reverse i.e. getting each of the individual values and joining them into a string.

Here we use $.css which pulls out a CSS setting. So all this methods collects the four individual values and add them to an array, which I then join at the end to return a string.