jQuery How to Get Element's Margin and Padding?
JqueryPaddingMarginJquery Problem Overview
Just wondering - how using jQuery - I can get an elements formatted total padding and margin 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 this doesn't work ? http://jsfiddle.net/q7Mra/
Jquery Solutions
Solution 1 - Jquery
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:
Here's the edited jsFiddle showing the result.
You can perform the same type of operations for the Height to get its margin, border, and padding.
Solution 2 - Jquery
According to the jQuery documentation, shorthand CSS properties are not supported.
Depending on what you mean by "total padding", you may be able to 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');
Solution 3 - Jquery
jQuery.css()
returns sizes in pixels, even if the CSS itself specifies them in em, or as a percentage, or whatever. It appends the units ('px'), but you can nevertheless use parseInt()
to convert them to integers (or parseFloat()
, for where fractions of pixels make sense).
$(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 4 - Jquery
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))
};
Result example:
Object {Top: 5, Right: 8, Bottom: 5, Left: 8}
To make a total:
var TotalPadding = Padding.Top + Padding.Right + Padding.Bottom + Padding.Left;
Solution 5 - Jquery
Border
I believe you can get the border width using .css('border-left-width')
. You can also fetch top, right, and bottom and compare them to find the max value. The key here is that you have to specify a specific side.
Padding
See https://stackoverflow.com/questions/3278997/jquery-calculate-padding-top-as-integer-in-px
Margin
Use the same logic as border or padding.
Alternatively, you could use outerWidth. The pseudo-code should bemargin = (outerWidth(true) - outerWidth(false)) / 2
. Note that this only works for finding the margin horizontally. To find the margin vertically, you would need to use outerHeight.
Solution 6 - Jquery
I've a snippet that shows, how to get the spacings of elements with jQuery:
/* messing vertical spaces of block level elements with jQuery in pixels */
console.clear();
var jObj = $('selector');
for(var i = 0, l = jObj.length; i < l; i++) {
//jObj.eq(i).css('display', 'block');
console.log('jQuery object:', jObj.eq(i));
console.log('plain element:', jObj[i]);
console.log('without spacings - jObj.eq(i).height(): ', jObj.eq(i).height());
console.log('with padding - jObj[i].clientHeight: ', jObj[i].clientHeight);
console.log('with padding and border - jObj.eq(i).outerHeight(): ', jObj.eq(i).outerHeight());
console.log('with padding, border and margin - jObj.eq(i).outerHeight(true):', jObj.eq(i).outerHeight(true));
console.log('total vertical spacing: ', jObj.eq(i).outerHeight(true) - jObj.eq(i).height());
}
Solution 7 - Jquery
If the element you're analyzing does not have any margin, border or whatsoever defined you won't be able to return it. At tops you'll be able to get 'auto' which is normally the default.
From your example I can see that you have margT
as variable. Not sure if're trying to get margin-top. If that's the case you should be using .css('margin-top')
.
You're also trying to get the stylization from 'img' which will result (if you have more than one) in an array.
What you should 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
});
Solution 8 - Jquery
Edit:
use jquery plugin: jquery.sizes.js
$('img').margin() or $('img').padding()
return:
{bottom: 10 ,left: 4 ,top: 0 ,right: 5}
get value:
$('img').margin().top