JQuery compute padding-top as an integer in px

Question

The only solution found: ($(this).innerHeight() - $(this).height()) / 2

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

Is there a way to make more accurate fill values?

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

Then create a switch statement for each type of value? For em one, for px another?

All this is a bit more complicated and takes up more space in the code ...

Answer 1

One of the main advantages of jQuery is that it is so plug-in, so if you have a need that is not immediately satisfied with the library, there is a huge landscape of search plugins. And if there is nobody to do what you want, it is really easy to collapse. I think the right way here if you cannot find a plugin that does what you want is the last one: write your own.

However, make sure you yourself understand the specifications of your plugin. What should it return if the element does not have css settings to populate? Should it return the style of this element or the computed style? What happens with invalid css (for example, "padding-top: 10 unitsThatDontExist;" or "padding-left: two;")?

To get started , here is what your own plugin can do in your code:

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

To make this available, simply write the plugin as follows:

 $.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 filling is

 $.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/