jQuery Element의 마진과 패딩을 얻는 방법?
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/
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입니다.
높이에 대해 동일한 유형의 작업을 수행하여 여백, 테두리 및 패딩을 가져올 수 있습니다.
jQuery 문서에 따르면 속기 CSS 속성은 지원되지 않습니다.
"전체 패딩(total padding)"을 의미하는 바에 따라 다음과 같은 작업을 수행할 수 있습니다.
var $img = $('img');
var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');
jQuery.css()
는 CSS 자체에서 크기를 지정하더라도 픽셀 단위로 크기를 반환합니다.단위('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 padding-top을 px의 정수로 계산
여백
테두리 또는 패딩과 같은 논리를 사용합니다.
또는 외부 너비를 사용할 수도 있습니다.의사 코드는 다음과 같아야 합니다.margin = (outerWidth(true) - outerWidth(false)) / 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());
}
분석 중인 요소에 여백, 테두리 또는 정의된 요소가 없으면 반환할 수 없습니다.상단에서는 보통 기본값인 '자동'을 얻을 수 있습니다.
당신의 예에서 볼 때 당신은margT
가변적인마진을 높이려고 하는 건지 확실하지 않습니다.만약 그런 경우에 당신이 사용해야 합니다..css('margin-top')
.
'img'에서 스타일화를 가져오려고 할 때도 있습니다. 이 경우 배열이 하나 이상일 경우)
당신이 해야 할 일은 당신이 사용하는 것입니다..each()
jquery method.
예를 들어,
jQuery('img').each(function() {
// get margin top
var margT = jQuery(this).css('margin-top');
// Do something with margT
});
편집:
jquery 플러그인 사용: jquery.jpgin.js
$('img').margin() or $('img').padding()
반환:
{bottom: 10 ,left: 4 ,top: 0 ,right: 5}
값을 가져옵니다.
$('img').margin().top
언급URL : https://stackoverflow.com/questions/7420434/jquery-how-to-get-elements-margin-and-padding
'programing' 카테고리의 다른 글
MySQL 교차 결합 쿼리에서 최대 절전 모드 예외 (0) | 2023.09.15 |
---|---|
sprintboot strup에서 반응형 r2dbc 드라이버에 대한 플라이웨이 마이그레이션을 실행하는 방법 (0) | 2023.09.15 |
C11의 __STDC_VERSION__ 값은 얼마입니까? (0) | 2023.09.15 |
UserDefault가 존재하는지 확인 - Swift (0) | 2023.09.15 |
WordPress의 댓글 게시를 위해 작은 MCE 리치 텍스트 편집기를 활성화하는 방법은 무엇입니까? (0) | 2023.09.15 |