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.

Namaste UI (Author)

Namaste UI collaborates closely with clients to develop tailored guest posting strategies that align with their unique goals and target audiences. Their commitment to delivering high-quality, niche-specific content ensures that each guest post not only meets but exceeds the expectations of both clients and the hosting platforms. Connect with us on social media for the latest updates on guest posting trends, outreach strategies, and digital marketing tips. For any types of guest posting services, contact us on info[at]namasteui.com.