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