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

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을 반환

CSS 속성에서 와 같이 잡을 수 있습니다 .

alert($("#mybox").css("padding-right"));
alert($("#mybox").css("margin-bottom"));

css 메소드에서 두 번째 속성으로 설정할 수 있습니다.

$("#mybox").css("padding-right", "20px");

편집 : 픽셀 값 만 필요한 경우 다음을 사용하십시오 parseInt(val, 10).

parseInt($("#mybox").css("padding-right", "20px"), 10);

좋아, 원래 질문에 대답하면됩니다.

다음과 같이 사용 가능한 정수로 패딩을 얻을 수 있습니다.

var padding = parseInt ($ ( "myId"). css ( "padding-top"). replace ( "ems", ""));

px와 같은 다른 측정 값을 정의한 경우 "ems"를 "px"로 바꾸십시오. parseInt는 stringpart를 잘못된 값으로 해석하므로 문자열을 ... none으로 바꾸는 것이 중요합니다.

다음과 같이 jquery 프레임 워크를 직접 확장 할 수도 있습니다.

jQuery.fn.margin = function() {
var marginTop = this.outerHeight(true) - this.outerHeight();
var marginLeft = this.outerWidth(true) - this.outerWidth();

return {
    top: marginTop,
    left: marginLeft
}};

이로써 margin ()이라는 jquery 객체에 함수를 추가하여 오프셋 함수와 같은 컬렉션을 반환합니다.

fx.

$("#myObject").margin().top

string.replace ( "px", ""))를 사용하지 마십시오.

parseInt 또는 parseFloat를 사용하십시오!

아마 github.com/bramstein/jsizes jquery 플러그인을 사용 하여 여백과 여백을 매우 편안한 방식으로 사용할 수 있습니다. 감사합니다 ...

Quickredfox 에서 뻔뻔 스럽게 채택 했습니다 .

jQuersy.fn.cssNum = function(){
    return parseInt(jQuery.fn.css.apply(this, arguments), 10);
};

최신 정보

parseInt(val, 10)보다 빠르므로로 변경되었습니다 parseFloat.

http://jsperf.com/number-vs-plus-vs-toint-vs-tofloat/20

괴로움이 아니라 다양한 값을 기반으로 픽셀을 결정할 수있는이를 만들었습니다.

$.fn.extend({
  pixels: function (property, base) {
    var value = $(this).css(property);
    var original = value;
    var outer = property.indexOf('left') != -1 || property.indexOf('right') != -1 
      ? $(this).parent().outerWidth()
      : $(this).parent().outerHeight();

    // EM Conversion Factor
    base = base || 16;

    if (value == 'auto' || value == 'inherit') 
        return outer || 0;

    value = value.replace('rem', '');
    value = value.replace('em', '');

    if (value !== original) {
       value = parseFloat(value);
       return value ? base * value : 0;
    }

    value = value.replace('pt', '');

    if (value !== original) {
       value = parseFloat(value);
       return value ? value * 1.333333 : 0; // 1pt = 1.333px
    }

    value = value.replace('%', '');

    if (value !== original) {
      value = parseFloat(value);
      return value ? (outer * value / 100) : 0;
    }

    value = value.replace('px', '');
    return parseFloat(value) || 0;
  }
});

이러한 방식으로 크기 조정 및 자동 / 상속을 고려합니다.