jQuery如何获取元素的边距和填充？

Question

只是想知道 - 如何使用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/

Answer 1

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显示结果.

您可以对高度执行相同类型的操作以获取其边距,边框和填充.

Answer 2

根据jQuery文档,不支持速记CSS属性.

根据"总填充"的含义,您可以执行以下操作:

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

Answer 3

jQuery.css()返回大小(以像素为单位),即使CSS本身在em中指定它们,或者以百分比形式指定,或者等等.它附加单位('px'),但你仍然可以使用parseInt()它们将它们转换为整数(或者parseFloat(),对于像素分数有意义的地方).

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