jQuery如何获取元素的边距和填充？
只是想知道 – 如何使用jQuery – 我可以得到一个元素格式化总填充和余量等？ 即30px 30px 30px 30px或30px 5px 15px 30px等
我试过了
var margT = jQuery('img').css('margin'); var bordT = jQuery('img').css('border'); var paddT = jQuery('img').css('padding'); 但是这不起作用？ http://jsfiddle.net/q7Mra/
根据jQuery文档 ，不支持速记CSS属性。
根据“填充填充”的含义，你也许可以这样做：
var $img = $('img'); var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');
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';
查看jQuery API文档以获取有关每个文档的信息：
- outerWidth
- innerWidth
- 宽度
这里是编辑的jsFiddle显示结果。
您可以对高度执行相同types的操作以获取其边距，边框和填充。
jQuery.css()以像素为单位返回大小，即使CSS自己用em或者百分比来表示它们，或者其他什么。 它追加了单位（'px'），但你仍然可以使用parseInt()将它们转换为整数（或parseFloat() ，其中像素的分数是有意义的）。
$(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>')); });
边境
我相信你可以使用.css('border-left-width')获得边框宽度。 您也可以获取顶部，右侧和底部，并比较它们以find最大值。 这里的关键是你必须指定一个特定的一面。
填充
看到像px中的整数jQuery计算填充顶部
余量
使用与边框或填充相同的逻辑。
或者，您可以使用outerWidth 。 伪代码应该是
margin = (outerWidth(true) - outerWidth(false)) / 2 。 请注意，这仅适用于水平查找边距。 要垂直查找边距，您需要使用outerHeight 。
这适用于我：
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)) };
结果示例：
Object {Top: 5, Right: 8, Bottom: 5, Left: 8}
总计：
var TotalPadding = Padding.Top + Padding.Right + Padding.Bottom + Padding.Left;
如果您正在分析的元素没有任何边距或任何定义的边界，您将无法将其返回。 在顶部，你将能够得到'自动'，这通常是默认的。
从你的例子中，我可以看到你有margT作为variables。 不知道是否试图获得利润顶部。 如果是这种情况，你应该使用.css('margin-top') 。
你也试图从“img”中得到程式，这将导致（如果你有多个）在一个数组中。
你应该做的是使用.each() jquery方法。
例如：
jQuery('img').each(function() { // get margin top var margT = jQuery(this).css('margin-top'); // Do something with margT });
$('img').margin() or $('img').padding()
返回：
{bottom: 10 ,left: 4 ,top: 0 ,right: 5}
获得价值：
$('img').margin().top
编辑：
使用jquery插件： jquery.sizes.js
