Nilai padding atau margin dalam piksel sebagai integer menggunakan jQuery

jQuery memiliki fungsi height () en width () yang mengembalikan tinggi atau lebar piksel sebagai bilangan bulat ...

Bagaimana saya bisa mendapatkan nilai padding atau margin elemen dalam piksel dan sebagai integer menggunakan jQuery?

Ide pertama saya adalah melakukan hal berikut:

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

Tetapi jika padding diberikan dalam ems misalnya, bagaimana saya bisa mendapatkan nilai dalam pixel?

Melihat ke plugin JSizes yang disarankan oleh Chris Pebble saya menyadari bahwa versi saya sendiri adalah yang benar :). jQuery selalu mengembalikan nilai dalam pixel, jadi hanya menguraikannya ke integer adalah solusinya.

Terima kasih kepada Chris Pebble dan Ian Robinson

Anda harus dapat menggunakan CSS ( http://docs.jquery.com/CSS/css#name ). Anda mungkin harus lebih spesifik seperti "padding-left" atau "margin-top".

Contoh:

CSS

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

JS

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

Hasilnya adalah 10px.

Jika Anda ingin mendapatkan nilai integer, Anda dapat melakukan hal berikut:

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

Bandingkan tinggi / lebar luar dan dalam untuk mendapatkan total margin dan bantalan:

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

Fungsi parseInt memiliki parameter "radix" yang mendefinisikan sistem angka yang digunakan pada konversi, sehingga memanggil parseInt(jQuery('#something').css('margin-left'), 10); mengembalikan margin kiri sebagai Integer.

Inilah yang digunakan JSize.

TOLONG jangan pergi memuat perpustakaan lain hanya untuk melakukan sesuatu yang sudah tersedia secara native!

jQuery .css()mengonversi %'s dan em's ke piksel yang setara dengan awalnya, dan parseInt()akan menghapus 'px'dari ujung string yang dikembalikan dan mengubahnya menjadi integer:

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

Inilah cara Anda mendapatkan dimensi di sekitarnya:

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

Perhatikan bahwa setiap variabel, paddingTopBottommisalnya, berisi jumlah margin pada kedua sisi elemen; yaitu paddingTopBottom == paddingTop + paddingBottom,. Saya bertanya-tanya apakah ada cara untuk mendapatkannya secara terpisah. Tentu saja, jika mereka sama, Anda dapat membagi dengan 2 :)

Fungsi sederhana ini akan melakukannya:

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

Pemakaian:

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

Parse int

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

mengembalikan 0 untuk 0px

Anda bisa mengambilnya dengan atribut CSS apa pun :

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

Anda dapat mengaturnya dengan atribut kedua dalam metode css:

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

EDIT: Jika Anda hanya perlu nilai piksel, gunakan parseInt(val, 10):

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

ok hanya untuk menjawab pertanyaan awal:

Anda bisa mendapatkan lapisan sebagai integer yang dapat digunakan seperti ini:

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

Jika Anda telah menetapkan pengukuran lain seperti px, ganti saja "ems" dengan "px". parseInt mengartikan stringpart sebagai nilai yang salah sehingga penting untuk menggantinya dengan ... tidak ada.

Anda juga dapat memperluas kerangka jquery sendiri dengan sesuatu seperti:

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

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

Dengan demikian menambahkan fungsi pada objek jquery Anda yang disebut margin (), yang mengembalikan koleksi seperti fungsi offset.

fx.

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

Jangan gunakan string.replace ("px", ""));

Gunakan parseInt atau parseFloat!

Saya mungkin menggunakan plugin jithery github.com/bramstein/jsizes untuk paddings dan margin dengan cara yang sangat nyaman, Terima kasih ...

Tanpa malu-malu diadopsi dari Quickredfox .

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

memperbarui

Diubah menjadi parseInt(val, 10)karena lebih cepat dari parseFloat.

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

Bukan untuk necro tapi saya membuat ini yang dapat menentukan piksel berdasarkan berbagai nilai:

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

Dengan cara ini, kami memperhitungkan ukuran, dan otomatis / mewarisi.