jQuery calculate padding-top as integer in px

Question

The only solution i have found is ($(this).innerHeight() - $(this).height()) / 2

But / 2 is not right option, because user can have padding-top:0px and padding-bottom:20px.

Is there a way to make more accurate padding values?

I was thinking about css('padding-top') and then parse it, by taking only int part, but value can be in "em" for example and not in "px"

Then make switch statement for each value type? For em one, for px another?

It's all a bit complicated and takes more space in code...

Answer 1

One of the main strengths of jQuery is that it is so pluggable, so if you have a need that is not immediately satisfied by the library, there's a vast landscape of plugins to search. And if there is none that does what you want, it's really easy to roll your own.
I think the right way to go here, if you can't find a plugin that does what you want, is the last one: to write your own.

However, make sure that you are clear with yourself on the specs of your plugin. What should it return if the element has no css setting for padding? Should it return the styling on this element, or the computed style? What happens for invalid css (say 'padding-top: 10 unitsThatDontExist;' or 'padding-left: two;')?

To get you started - this is what using your own plugin could look like in your code:

var topPadding = $('#anElement').padding('top');

To make that available, just write a plugin like this:

$.fn.padding(direction) {
    // calculate the values you need, using a switch statement
    // or some other clever solution you figure out

    // this now contains a wrapped set with the element you apply the 
    // function on, and direction should be one of the four strings 'top', 
    // 'right', 'left' or 'bottom'

    // That means you could probably do something like (pseudo code):
    var intPart = this.css('padding-' + direction).getIntegerPart();
    var unit = this.css('padding-' + direction).getUnit();

    switch (unit)
    {
        case 'px':
            return intPart;
        case 'em':
            return ConvertEmToPx(intPart)
        default:
            // Do whatever you feel good about as default action
            // Just make sure you return a value on each code path
    }
};

Answer 2

As far as I know, getComputedSyle and cross browser equivalents are used in jQuery when requesting .css("padding-top") so they should have already been converted to pixels.

Another way to calculate the padding is as follows

$.fn.padding = function () {
    // clone the interesting element
    // append it to body so that CSS can take effect
    var clonedElement = this.
        clone().
        appendTo(document.body);

    // get its height
    var innerHeight = clonedElement.
        innerHeight();

    // set its padding top to 0
    clonedElement.css("padding-top","0");

    // get its new height
    var innerHeightWithoutTopPadding = clonedElement.
        innerHeight();

    // remove the clone from the body
    clonedElement.remove();

    // return the difference between the height with its padding and without its padding
    return innerHeight - innerHeightWithoutTopPadding;

};

// Test it

console.log($("div").padding()); // prints 19 in Chrome 23
console.log($("div").css("padding-top")); // prints 19.733333587646484px

​ Located at: http://jsfiddle.net/oatkiller/9t9RJ/1/