그냥 궁금해-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 문서를 확인하십시오.
다음 은 결과를 보여주는 편집 된 jsFiddle 입니다.
Height에 대해 동일한 유형의 작업을 수행하여 여백, 테두리 및 패딩을 가져올 수 있습니다.
답변
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>'));
});답변
이것은 나를 위해 작동합니다.
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에서 정수로 패딩 상단 계산을 참조하십시오.
여유
테두리 또는 패딩과 동일한 논리를 사용합니다.
또는 outerWidth를 사용할 수 있습니다 . 의사 코드는 margin = (outerWidth(true) - outerWidth(false)) / 2. 이것은 가로로 여백을 찾는 경우에만 작동합니다. 여백을 세로로 찾으려면 outerHeight 를 사용해야 합니다.
답변
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());
}답변
분석중인 요소에 여백, 테두리 또는 정의 된 요소가없는 경우 반환 할 수 없습니다. 정상에서는 일반적으로 기본값 인 ‘자동’을 얻을 수 있습니다.
귀하의 예에서 나는 당신이 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
});