JQuery kullanarak tam sayı olarak piksel cinsinden dolgu veya kenar boşluğu değeri

jQuery, piksel cinsinden yükseklik veya genişliği tamsayı olarak döndüren height () en width () işlevlerine sahiptir ...

JQuery kullanarak bir öğenin doldurma veya kenar boşluğu değerini piksel cinsinden ve tamsayı olarak nasıl alabilirim ?

İlk fikrim aşağıdakileri yapmaktı:

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

Ancak, örneğin ems'de dolgulama verilirse, değeri piksel cinsinden nasıl alabilirim?

Chris Pebble tarafından önerilen JSizes eklentisine baktığımda kendi sürümümün doğru olduğunu anladım :). jQuery her zaman piksel cinsinden değer döndürür, bu yüzden onu tamsayıya çözümlemek çözümdü.

Chris Pebble ve Ian Robinson'a teşekkürler

CSS kullanabilmeniz gerekir ( http://docs.jquery.com/CSS/css#name ). "Sol dolgu" veya "kenar boşluğu" gibi daha spesifik olmanız gerekebilir.

Misal:

CSS

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

JS

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

Sonuç 10 pikseldir.

Tam sayı değerini almak istiyorsanız, aşağıdakileri yapabilirsiniz:

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

Toplam kenar boşluğu ve dolgu elde etmek için dış ve iç yükseklik / genişlikleri karşılaştırın:

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

ParseInt işlevi, dönüşümde kullanılan sayısal sistemi tanımlayan bir "radix" parametresine sahiptir, bu nedenle çağrı parseInt(jQuery('#something').css('margin-left'), 10);sol kenar boşluğunu bir Tamsayı olarak döndürür.

JSizes bunu kullanır.

LÜTFEN yerel olarak mevcut olan bir şeyi yapmak için başka bir kütüphane yüklemeye gitmeyin!

jQuery's .css()% 's ve em'leri başlamak için piksel eşdeğerine dönüştürür ve döndürülen dizenin sonundan parseInt()kaldırır ve 'px'bir tamsayıya dönüştürür:

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

Çevresel boyutları nasıl elde edebileceğiniz aşağıda açıklanmıştır:

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

Her değişkenin, paddingTopBottomörneğin, öğenin her iki tarafındaki kenar boşluklarının toplamını içerdiğine dikkat edin ; yani paddingTopBottom == paddingTop + paddingBottom. Onları ayrı ayrı almanın bir yolu olup olmadığını merak ediyorum. Tabii ki, eşitse 2'ye bölebilirsiniz :)

Bu basit işlev bunu yapacaktır:

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

Kullanımı:

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

İnt ayrıştırma

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

0 piksel için 0 döndürür

Bunları herhangi bir CSS özelliğinde olduğu gibi yakalayabilirsiniz :

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

Onları css yönteminde ikinci bir öznitelikle ayarlayabilirsiniz:

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

EDIT: Yalnızca piksel değerine ihtiyacınız varsa, şunu kullanın parseInt(val, 10):

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

Tamam sadece orijinal soruyu cevaplamak için:

doldurmayı aşağıdaki gibi kullanılabilir bir tamsayı olarak alabilirsiniz:

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

Px gibi başka bir ölçüm tanımladıysanız, "ems" yerine "px" yazın. parseInt, dize parçasını yanlış bir değer olarak yorumlar, bu nedenle onu hiçbir şeyle değiştirmek önemlidir.

Ayrıca jquery çerçevesini kendiniz gibi bir şeyle genişletebilirsiniz:

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

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

Böylece jquery nesnelerinize, ofset işlevi gibi bir koleksiyon döndüren margin () adlı bir işlev eklenir.

fx.

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

String.replace ("px", "")) kullanmayın;

ParseInt veya parseFloat kullanın!

Muhtemelen dolgu ve marjlar için github.com/bramstein/jsizes jquery eklentisini çok rahat bir şekilde kullanıyorum, teşekkürler ...

Quickredfox'tan utanmadan kabul edildi .

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

Güncelleme

Değiştirildi parseInt(val, 10)o daha hızlıdır çünkü parseFloat.

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

Necro değil ama ben çeşitli değerlere dayalı pikselleri belirleyebilir bunu yaptı:

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

Bu şekilde, boyutlandırma ve otomatik / devralma için dikkate alırız.