jQuery 요소의 여백과 패딩을 얻는 방법?

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 입니다.

Height에 대해 동일한 유형의 작업을 수행하여 여백, 테두리 및 패딩을 가져올 수 있습니다.

---

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

---

이것은 나를 위해 작동합니다.

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;

---

경계

을 사용하여 테두리 너비를 얻을 수 있다고 생각합니다 .css('border-left-width'). 또한 위쪽, 오른쪽 및 아래쪽을 가져 와서 비교하여 최대 값을 찾을 수도 있습니다. 여기서 핵심은 특정면을 지정해야한다는 것입니다.

심

jQuery는 px에서 정수로 패딩 상단 계산을 참조하십시오.

여유

테두리 또는 패딩과 동일한 논리를 사용합니다.

Alternatively, you could use outerWidth. The pseudo-code should be
margin = (outerWidth(true) - outerWidth(false)) / 2. Note that this only works for finding the margin horizontally. To find the margin vertically, you would need to use outerHeight.

---

I've a snippet that shows, how to get the spacings of elements with 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());
}

---

If the element you're analyzing does not have any margin, border or whatsoever defined you won't be able to return it. At tops you'll be able to get 'auto' which is normally the default.

From your example I can see that you have margT as variable. Not sure if're trying to get margin-top. If that's the case you should be using .css('margin-top').

You're also trying to get the stylization from 'img' which will result (if you have more than one) in an array.

What you should do is use the .each() jquery method.

For example:

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

    // Do something with margT
});

---

$('img').margin() or $('img').padding()

return:

{bottom: 10 ,left: 4 ,top: 0 ,right: 5}

get value:

$('img').margin().top

Edit:

use jquery plugin: jquery.sizes.js

참고URL : https://stackoverflow.com/questions/7420434/jquery-how-to-get-elements-margin-and-padding