jQuery / Javascript - Bagaimana cara mengubah nilai piksel (20px) menjadi nilai angka (20)


101

Saya tahu jQuery memiliki metode pembantu untuk mem-parsing string unit menjadi angka. Apa metode jQuery untuk melakukan ini?

var a = "20px";
var b = 20;
var c = $.parseMethod(a) + b;

parseInt (a, 10); kembalikan NaN jika a adalah string
— vanduc1102

Jawaban:


184

Tidak diperlukan jQuery untuk ini, Plain Ol 'JS (tm) akan melakukannya,

parseInt(a, 10);

4
Setiap hari dalam segala hal aku semakin mencintaimu javascript
— James Westgate

1
Ini tidak akan berfungsi untuk "20pt" atau "20em". parseInt ("20pt") == 20! Ini mungkin semua yang dibutuhkan poster, tetapi saya ingin dapat menggunakan X ("20em") sebagai contoh dan mendapatkan kembali lebar sebenarnya dalam piksel.
— Lawrence I. Siden

2
@ Lsiden: berhasil. parseInt("20em", 10) === 20dan parseInt("20pt", 10) === 20. Jangan ragu untuk menempelkan ekspresi mana pun ke konsol browser favorit Anda, atau lihat contoh yang sangat singkat ini . Masalah apa pun yang Anda hadapi terletak di tempat lain dalam kode Anda.
— Andy E

6
Sidenote, parseIntfungsi sebenarnya akan mengabaikan semua karakter non-integer yang ditambahkan ke akhir string karakter integer. parseInt('234sdfsdf') == 234
— Chris W.

3
@AndyE: Isiden mengatakan bahwa parseInt tidak akan mengonversi nilai em (atau pt atau lainnya) dalam nilai piksel yang setara, yang mungkin dibutuhkan sebagian orang.
— LeartS

30

Secara lebih umum, parseFloatakan memproses angka floating-point dengan benar, sedangkan parseIntmungkin diam-diam kehilangan angka yang signifikan:

parseFloat('20.954544px')
> 20.954544
parseInt('20.954544px')
> 20


5
$.parseMethod = function (s)
{
    return Number(s.replace(/px$/, ''));
};

meskipun bagaimana ini terkait dengan jQuery, saya tidak tahu


0

Maaf sudah menggali, tapi:

var bar = "16px";

var foo = parseInt(bar, 10); // Doesn't work! Output is always 16px
// and
var foo = Number(s.replace(/px$/, '')); // No more!

parseInt ('16px', 10); lakukan pekerjaan untuk saya di konsol pengembang Google Chrome
— Thomas

-2
$(document).ready(function(){<br>
    $("#btnW1").click(function(){<br>
        $("#d1").animate({<br>
            width: "+=" + x,

        });
    });

Saat mencoba mengidentifikasi variabel x dengan nilai piksel I dengan menggunakan jquery, saya memberi tanda + = dalam tanda kutip. Alih-alih memiliki lebar: '+ = x', yang tidak berfungsi karena dianggap x adalah string, bukan angka. Semoga membantu.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.