JQuery How to get element margin and padding?

Question

Just wondering - how using jQuery - can I get a formatted total number of elements and fields, etc.? i.e. 30px 30px 30px 30px or 30px 5px 15px 30px etc.

I tried

var margT = jQuery('img').css('margin'); var bordT = jQuery('img').css('border'); var paddT = jQuery('img').css('padding'); 

But does it not work? http://jsfiddle.net/q7Mra/

Answer 1

According to jQuery documentation , shorthand CSS properties are not supported.

Depending on what you mean by “full fill,” you can do something like this:

 var $img = $('img'); var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left'); 

Answer 2

 var bordT = $('img').outerWidth() - $('img').innerWidth(); var paddT = $('img').innerWidth() - $('img').width(); var margT = $('img').outerWidth(true) - $('img').outerWidth(); var formattedBord = bordT + 'px'; var formattedPadd = paddT + 'px'; var formattedMarg = margT + 'px'; 

Check the jQuery API docs for information on each of them:

• outerWidth
• innerWidth
• width

Here's the edited jsFiddle showing the result.

You can perform the same type of operations for height to get its margin, border, and complement.

Answer 3

jQuery.css() returns the sizes in pixels, even if the CSS itself indicates them in em or as a percentage or something else. It adds units ('px'), but nonetheless you can use parseInt() to convert them to integers (or parseFloat() , for which fractions of pixels are important).

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

Answer 4

Border

I believe you can get the border width with .css('border-left-width') . You can also select the top, right and bottom and compare them to find the maximum value. The key point here is that you have to indicate a specific side.

Hauling

See jQuery calculate padding-top as integer in px

Margin

Use the same logic as the border or padding.

Alternatively you can use outerWidth . The pseudocode should be margin = (outerWidth(true) - outerWidth(false)) / 2 . Note that this only works for finding the field horizontally. To find the edge vertically, you will need to use outerHeight .

Answer 5

This works for me:

 var tP = $("img").css("padding").split(" "); var Padding = { Top: tP[0] != null ? parseInt(tP[0]) : 0, Right: tP[1] != null ? parseInt(tP[1]) : (tP[0] != null ? parseInt(tP[0]) : 0), Bottom: tP[2] != null ? parseInt(tP[2]) : (tP[0] != null ? parseInt(tP[0]) : 0), Left: tP[3] != null ? parseInt(tP[3]) : (tP[1] != null ? parseInt(tP[1]) : (tP[0] != null ? parseInt(tP[0]) : 0)) }; 

Example result:

 Object {Top: 5, Right: 8, Bottom: 5, Left: 8} 

To make the total:

 var TotalPadding = Padding.Top + Padding.Right + Padding.Bottom + Padding.Left; 

Answer 6

If the element you are analyzing does not have any field, border, or is not defined at all, you cannot return it. At the tops you can get a “car,” which is usually the default.

In your example, I see that you have margT as a variable. Not sure if I'm trying to get margin. If in this case you should use .css('margin-top') .

You are also trying to get the styling from "img", which will result (if you have more than one) in the array.

What you need to do is use the .each() jquery method.

For example:

 jQuery('img').each(function() { // get margin top var margT = jQuery(this).css('margin-top'); // Do something with margT }); 

Answer 7

 $('img').margin() or $('img').padding() 

Return:

 {bottom: 10 ,left: 4 ,top: 0 ,right: 5} 

get value:

 $('img').margin().top 

Edit:

use jquery plugin: jquery.sizes.js