Dapatkan nilai teratas css sebagai angka bukan sebagai string?

123

Di jQuery Anda bisa mendapatkan posisi teratas relatif terhadap induk sebagai angka, tetapi Anda tidak bisa mendapatkan nilai teratas css sebagai angka jika sudah diatur px.
Katakanlah saya memiliki yang berikut:

#elem{
  position:relative;
  top:10px;
 }
<div>
  Bla text bla this takes op vertical space....
  <div id='elem'>bla</div>
</div>
$('#elem').position().top; //Returns the number (10+(the vertical space took by the text))
$('#elem').css('top'); //Returns the string '10px'

Tapi saya ingin memiliki properti atas css sebagai angkanya 10.
Bagaimana seseorang mencapai ini?

Pim Jager
sumber

Jawaban:

213

Anda dapat menggunakan fungsi parseInt () untuk mengubah string menjadi angka, misalnya:

parseInt($('#elem').css('top'));

Pembaruan: (seperti yang disarankan oleh Ben): Anda harus memberikan radix juga:

parseInt($('#elem').css('top'), 10);

Memaksanya untuk diurai sebagai angka desimal, jika tidak, string yang diawali dengan '0' mungkin akan diuraikan sebagai angka oktal (mungkin bergantung pada browser yang digunakan).

M4N
sumber
57
Anda juga harus memberikan radix: parseInt ($ ('# elem'). Css ('top'), 10); Memaksanya untuk diurai sebagai basis 10, jika tidak, string yang dimulai dengan '0' akan diuraikan di basis 8.
Ben
3
Ini bisa menjadi float, jadi lebih baik menggunakan parseFloat.
Vsevolod Golovanov
25

Plugin jQuery berdasarkan jawaban M4N

jQuery.fn.cssNumber = function(prop){
    var v = parseInt(this.css(prop),10);
    return isNaN(v) ? 0 : v;
};

Jadi Anda cukup menggunakan metode ini untuk mendapatkan nilai angka

$("#logo").cssNumber("top")
Ivan Castellanos
sumber
13

Plugin yang sedikit lebih praktis / efisien berdasarkan jawaban Ivan Castellanos (yang didasarkan pada jawaban M4N). Menggunakan || 0akan mengubah Nan menjadi 0 tanpa langkah pengujian.

Saya juga menyediakan variasi float dan int agar sesuai dengan tujuan penggunaan:

jQuery.fn.cssInt = function (prop) {
    return parseInt(this.css(prop), 10) || 0;
};

jQuery.fn.cssFloat = function (prop) {
    return parseFloat(this.css(prop)) || 0;
};

Pemakaian:

$('#elem').cssInt('top');    // e.g. returns 123 as an int
$('#elem').cssFloat('top');  // e.g. Returns 123.45 as a float

Uji biola di http://jsfiddle.net/TrueBlueAussie/E5LTu/

Hilang Coding
sumber
Tampaknya seseorang harus selalu menggunakan cssFloat atau mempertimbangkan bahwa cssInt akan menghapus nilai seperti 25.9999999px menjadi 25.
justingord
1
@justingordon: Itu adalah perilaku pemotongan integer yang benar untuk int, jadi itu benar-benar tergantung pada penggunaan nilai yang diperlukan.
Pergi Coding