web-dev-qa-db-ja.com

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/

jquerypaddingmargin
94
Tom

jQueryのドキュメント によると、CSSの簡易プロパティはサポートされていません。

「総パディング」の意味に応じて、次のようなことができます。

var $img = $('img');
var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');
95
Elias Zamaria
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ドキュメントを確認してください。

編集した jsFiddle が結果を示しています。

Heightに対して同じタイプの操作を実行して、マージン、ボーダー、およびパディングを取得できます。

185
Dan Short

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

これは私のために働く：

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;
3
Brutus

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());
}
2
Andreas

境界

.css('border-left-width')を使用して境界線の幅を取得できると思います。また、上、右、下をフェッチして比較し、最大値を見つけることもできます。ここで重要なのは、特定のサイドを指定する必要があるということです。

パディング

jQueryはパディングトップをpxの整数として計算 を参照してください

Margin

ボーダーまたはパディングと同じロジックを使用します。

または、outerWidthを使用できます。擬似コードは
margin = (outerWidth(true) - outerWidth(false)) / 2。これは水平方向のマージンを見つけるためにのみ機能することに注意してください。マージンを垂直方向に見つけるには、outerHeightを使用する必要があります。

2
simshaun

分析している要素にマージン、境界線、または定義されているものがない場合、それを返すことはできません。上部では、通常はデフォルトである「自動」を取得できます。

あなたの例から、変数としてmargTがあることがわかります。マージントップを取得しようとしているかどうかはわかりません。その場合は、.css('margin-top')を使用する必要があります。

また、配列に結果が（複数ある場合） 'img'から様式化を取得しようとしています。

あなたがすべきことは.each() jqueryメソッドを使用することです。

例えば：

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

    // Do something with margT
});
0
José P. Airosa