jQuery를 사용하여 픽셀 단위의 패딩 또는 여백 값(픽셀 단위)

jQuery를 사용하여 픽셀 단위의 패딩 또는 여백 값(픽셀 단위)

jQuery에는 높이() en width() 함수가 있습니다.이 함수는 픽셀 단위의 높이 또는 폭을 정수로 반환합니다.

jQuery를 사용하여 픽셀 단위 및 정수로 요소의 패딩 또는 여백 값을 얻으려면 어떻게 해야 합니까?

제 첫 번째 생각은 다음과 같습니다.

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

하지만 패딩이 예를 들어 ems로 되어 있다면 어떻게 픽셀 단위로 값을 얻을 수 있을까요?

---

Chris Pebble이 제안한 JSizes 플러그인을 보고 제 버전이 맞는 버전임을 깨달았습니다. :)jQuery는 항상 픽셀 단위로 값을 반환하므로 이를 정수로 구문 분석하는 것이 해결책이었습니다.

크리스 페블과 이안 로빈슨 덕분에

CSS(http://docs.jquery.com/CSS/css#name)를 사용할 수 있습니다.패딩-왼쪽 또는 마진-톱과 같이 좀 더 구체적으로 설명해야 할 수도 있습니다.

예:

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());

해석Int 함수에는 변환에 사용되는 숫자 시스템을 정의하는 "radix" 파라미터가 있습니다.따라서 호출합니다.parseInt(jQuery('#something').css('margin-left'), 10);왼쪽 여백을 Integer로 반환합니다.

이게 JSizes가 쓰는 거예요.

이미 네이티브로 이용할 수 있는 작업을 하기 위해 다른 라이브러리를 로드하지 마십시오.

jQuery's.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로 나눌 수 있습니다. : )

임의의 CSS Atribut과 같이, 그것들을 취득할 수 있습니다.

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

css 메서드의 두 번째 Atribut을 사용하여 설정할 수 있습니다.

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

편집: 픽셀 값만 필요한 경우parseInt(val, 10):

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

이 간단한 기능을 사용하면 됩니다.

$.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을 반환합니다.

첫 번째 질문에 대답만 하면 됩니다.

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

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

px와 같은 다른 측정을 정의한 경우 "ems"를 "px"로 대체하십시오.int는 stringpart를 잘못된 값으로 해석하므로 이 값을 ...로 대체하는 것이 중요합니다.아무 것도 없어요.

다음과 같은 방법으로 jquery 프레임워크를 직접 확장할 수도 있습니다.

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

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

이것에 의해, 마진()이라고 하는 함수를 jquery 오브젝트에 추가합니다.이 함수는 오프셋 함수와 같은 컬렉션을 반환합니다.

fx.

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

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

해석 사용Int 또는 parseFloat!

패딩이나 여백에 github.com/bramstein/jsizes jquery plugin을 매우 편안하게 사용할 수 있을 것 같습니다.감사합니다.

뻔뻔스럽게도 퀵레드폭스에서 입양되었다.

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

이 방법에서는 사이징과 자동 상속을 고려합니다.

언급URL : https://stackoverflow.com/questions/590602/padding-or-margin-value-in-pixels-as-integer-using-jquery