[javascript] jQuery를 사용하여 패딩 또는 여백 값을 정수로 픽셀 단위로 표시

JAVASCRIPT / 글쓴이

jQuery에는 높이 또는 너비를 픽셀 단위로 정수로 반환하는 height () en width () 함수가 있습니다 …

jQuery를 사용하여 요소의 패딩 또는 여백 값을 픽셀 단위 및 정수로 얻는 방법은 무엇입니까?

내 첫 번째 아이디어는 다음을 수행하는 것이 었습니다.

var padding = parseInt(jQuery("myId").css("padding-top"));

그러나 예를 들어 패딩이 ems로 주어지면 어떻게 픽셀 단위로 값을 얻을 수 있습니까?

Chris Pebble이 제안한 JSizes 플러그인을 살펴보면 내 버전이 올바른 것임을 깨달았습니다. :). jQuery는 항상 값을 픽셀 단위로 반환하므로 정수로 파싱하는 것이 해결책이었습니다.

Chris Pebble과 Ian Robinson 덕분에

답변

CSS를 사용할 수 있어야합니다 ( http://docs.jquery.com/CSS/css#name ). “padding-left”또는 “margin-top”과 같이 더 구체적이어야 할 수도 있습니다.

예:

CSS

a, a:link, a:hover, a:visited, a:active {color:black;margin-top:10px;text-decoration: none;}

JS

$("a").css("margin-top");

결과는 10px입니다.

정수 값을 얻으려면 다음을 수행하십시오.

parseInt($("a").css("margin-top"))

답변

외부와 내부 높이 / 너비를 비교하여 총 여백과 패딩을 얻습니다.

var that = $("#myId");
alert(that.outerHeight(true) - that.innerHeight());

답변

parseInt 함수에는 변환에 사용 된 숫자 시스템을 정의하는 “radix”매개 변수가 있으므로 호출 parseInt(jQuery('#something').css('margin-left'), 10);하면 왼쪽 여백이 정수로 리턴됩니다.

이것이 JSizes가 사용하는 것입니다.

답변

이미 기본적으로 제공되는 작업을 수행하기 위해 다른 라이브러리를로드하지 마십시오!

jQuery .css()는 %와 em을 픽셀과 동등한 것으로 변환하고 반환 된 문자열의 끝에서 parseInt()를 제거하고 'px'정수로 변환합니다.

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 elem = $('#myId');

var marginTopBottom  = elem.outerHeight(true) - elem.outerHeight();
var marginLeftRight  = elem.outerWidth(true)  - elem.outerWidth();

var borderTopBottom  = elem.outerHeight() - elem.innerHeight();
var borderLeftRight  = elem.outerWidth()  - elem.innerWidth();

var paddingTopBottom  = elem.innerHeight() - elem.height();
var paddingLeftRight  = elem.innerWidth()  - elem.width();

paddingTopBottom예를 들어, 각 변수 에는 요소의 양쪽에 여백의 합이 포함되어 있습니다. 즉 paddingTopBottom == paddingTop + paddingBottom. 그것들을 따로 얻는 방법이 있는지 궁금합니다. 물론, 그들이 같다면 2로 나눌 수 있습니다 🙂

답변

이 간단한 기능은 다음을 수행합니다.

$.fn.pixels = function(property) {
    return parseInt(this.css(property).slice(0,-2));
};

용법:

var padding = $('#myId').pixels('paddingTop');

답변

int 파싱

parseInt(canvas.css("margin-left"));

0px에 대해 0을 반환