jQuery要素のマージンとパディングを取得する方法は?


105

ただ疑問に思っています-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/



下記のリンクを参考にしてください。 stackoverflow.com/questions/590602/...
Praveenさん

回答:


105

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

「合計パディング」の意味によっては、次のようなことができる場合があります。

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

ええ、あなたはそれぞれを個別に行わなければならないようです:(これはうんざりです
Tom

27
このように引っ張らないでください。autoまたは2%またはまたはの場合はどうなりinheritますか?
オービットでの軽さのレース

@ダン-ダンの努力に本当に感謝しています。あなたの時間を無駄にするより:(申し訳ありませんが明確でないために謝罪。
トム・

3
あなたは非数値について正しいです。ダン・ショートの答えはもっとしっかりしていると思います。
エリアスザマリア

4
update:jQuery 1.9以降、スタイルプロパティの配列を.css()に渡すと、プロパティと値のペアのオブジェクトが生成されます。たとえば、レンダリングされた4つの境界線幅の値をすべて取得するには、次のように使用できます$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).
Hussein Nazzal

193
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に対して同じタイプの操作を実行して、マージン、ボーダー、およびパディングを取得できます。


1
その場合は、計算された値を取得し、「px」を追加すると、ピクセル値が得られます。
Dan Short

2
それを明確にするために質問を更新する必要があります。そうでなければ、私たちはあなたが解決しようとしていない問題の解決策を書くのに時間を浪費しています:)。必要な戻り値を正確に質問で説明してください。あなたはを求め、合計のために異なっていてもよく、(個々のマージン値、要素のマージンとパディングないmargin-leftmargin-right、あってもよいempx
ダン・ショート

2
ですが、それはあなたの質問に対する私の編集であり、元の質問ではありませんでした:)
Dan Short

4
これは非常に便利です。左と右のマージン/パディング値が異なり、たとえば、左マージンまたはパディング値だけが必要な場合はどうしますか?
jpap 2013年

1
上マージンはnotに接続されてheightいませんwidthか?
JohnK 2013年

16

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

3

これは私にとってはうまくいきます:

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;

2

境界

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

パディング

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

マージン

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

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


マージンの戦略はFirefoxでは機能しません。たとえば、要素を中央に配置するなどの「自動」水平パディングがある場合、毎回0を返します。
Ben Dilts、2014

2

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

0

分析している要素にマージン、ボーダー、または定義された要素がない場合、それを返すことはできません。トップスでは、通常はデフォルトである「auto」を取得できます。

あなたの例から、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
});

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.