Padding or margin value in pixels as integer using jQuery

Padding or margin value in pixels as integer using jQuery

jQuery has height() en width() functions that returns the height or width in pixels as integer…
How can I get a padding or margin value of an element in pixels and as integer using jQuery?
My first idea was to do the following:
var padding = parseInt(jQuery(“myId”).css(“padding-top”));

But if padding is given in ems for example, how can I get the value in pixels?

Looking into the JSizes plugin suggested by Chris Pebble i realized that my own version was the right one :). jQuery returns always value in pixels, so just parsing it to integer was the solution.
Thanks to Chris Pebble and Ian Robinson

Solutions/Answers:

Solution 1:

You should be able to use CSS (http://docs.jquery.com/CSS/css#name). You may have to be more specific such as “padding-left” or “margin-top”.

Example:

CSS

a, a:link, a:hover, a:visited, a:active {color:black;margin-top:10px;text-decoration: none;}

JS

$("a").css("margin-top");

The result is 10px.

Related:  Javascript : Send JSON Object with Ajax?

If you want to get the integer value, you can do the following:

parseInt($("a").css("margin-top"))

Solution 2:

Compare outer and inner height/widths to get the total margin and padding:

var that = $("#myId");
alert(that.outerHeight(true) - that.innerHeight());

Solution 3:

The parseInt function has a “radix” parameter which defines the numeral system used on the conversion, so calling parseInt(jQuery('#something').css('margin-left'), 10); returns the left margin as an Integer.

This is what JSizes use.

Solution 4:

PLEASE don’t go loading another library just to do something that’s already natively available!

jQuery’s .css() converts %’s and em’s to their pixel equivalent to begin with, and parseInt() will remove the 'px' from the end of the returned string and convert it to an integer:

http://jsfiddle.net/BXnXJ/

$(document).ready(function () {
    var $h1 = $('h1');
    console.log($h1);
    $h1.after($('<div>Padding-top: ' + parseInt($h1.css('padding-top')) + '</div>'));
    $h1.after($('<div>Margin-top: ' + parseInt($h1.css('margin-top')) + '</div>'));
});

Solution 5:

Here’s how you can get the surrounding dimentions:

var elem = $('#myId');

var marginTopBottom  = elem.outerHeight(true) - elem.outerHeight();
var marginLeftRight  = elem.outerWidth(true)  - elem.outerWidth();

var borderTopBottom  = elem.outerHeight() - elem.innerHeight();
var borderLeftRight  = elem.outerWidth()  - elem.innerWidth();

var paddingTopBottom  = elem.innerHeight() - elem.height();
var paddingLeftRight  = elem.innerWidth()  - elem.width();

Pay attention that each variable, paddingTopBottom for example, contains the sum of the margins on the both sides of the element; i.e., paddingTopBottom == paddingTop + paddingBottom. I wonder if there is a way to get them separately. Of course, if they are equal you can divide by 2 🙂

Related:  Map vs Object in JavaScript

Solution 6:

This simple function will do it:

$.fn.pixels = function(property) {
    return parseInt(this.css(property).slice(0,-2));
};

Usage:

var padding = $('#myId').pixels('paddingTop');