jQuery获取元素填充/边距

今天，我正在研究如何获取和设置DOM元素的填充/边距值。 我正在寻找更多外部边缘和填充物的特定位置。 如您所知，可以使用CSS设置元素的填充和边距，但是获取正确的值可能会出现问题。

//sets
$("div.header").css("margin","10px");
$("div.header").css("padding","10px");

常识，您会认为这可行，但似乎不可行。

//gets
$("div.header").css("margin");
$("div.header").css("padding");

自己尝试一下（将下面的代码粘贴到Firebug中）。 您会看到为边距和填充返回空值。 也许我在这里想念什么？

(function($){

function logMarginPadding(elem)
{
//gets
var margin = elem.css("margin"),
padding = elem.css("padding");
console.log("margin="+margin+" padding="+padding);
}

var elem = $("div.header"); //set the element to inspect

logMarginPadding(elem);
//sets
elem.css("margin","10px");
elem.css("padding","10px");
logMarginPadding(elem);

})(jQuery);

这似乎有效。

//get top margin of element
alert($("div.header").css("margin-top"));

//get top margin of element as integer value
alert($("a").css("margin-top").replace("px", ""));

//if using it with a calculation you must convert it to an integer
parseInt($("a").css('padding-left').replace("px", ""));

无论如何，这就是我获取元素填充的方式。 这不是理想的方法，仅当填充物均匀时才有效（两边相同），只需将宽度和外部宽度除以2。

var item = $('div.header');
width = item.width(),
padding = (item.outerWidth()-width)/2;

有一个非常流行的插件，称为jsizes ，它可能是获取/设置元素上的边距/填充值的好方法。

JSizes是jQuery JavaScript库的一个小插件，它增加了对查询和设置CSS最小宽度，最小高度，最大宽度，最大高度，边框*宽度，边距和填充属性的支持。

进一步阅读
jQuery具有功能externalWidth和outsideHeight，默认情况下包括边框和填充，如果函数的第一个参数为true，则还包含空白
http://api.jquery.com/outerHeight/
http://api.jquery.com/outerWidth/

From: https://www.sitepoint.com/jquery-element-paddingmargin/