Pobrać najwyższą wartość w CSS jako liczbę, a nie jako ciąg?

123

W jQuery możesz uzyskać najwyższą pozycję względem rodzica jako liczbę, ale nie możesz uzyskać najwyższej wartości css jako liczby, jeśli została ustawiona w px.
Powiedz, że mam:

#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'

Ale chcę mieć właściwość top w CSS jako liczbę 10.
Jak można to osiągnąć?

javascript jquery css Pim Jager
źródło

Odpowiedzi:

213

Możesz użyć funkcji parseInt (), aby przekonwertować ciąg na liczbę, np .:

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

Aktualizacja: (zgodnie z sugestią Bena): Powinieneś także podać radix:

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

Wymusza analizę jako liczbę dziesiętną, w przeciwnym razie łańcuchy zaczynające się od „0” mogą być analizowane jako liczba ósemkowa (może to zależeć od używanej przeglądarki).

M4N
źródło
57
Powinieneś także podać podstawę: parseInt ($ ('# elem'). Css ('top'), 10); Wymusza parsowanie jako podstawy 10, w przeciwnym razie ciągi znaków zaczynające się od „0” będą analizowane w bazie 8.
Ben,
3
Może to być jednak float, więc lepiej jest użyć parseFloat.
Vsevolod Golovanov
25

Wtyczka jQuery oparta na odpowiedzi M4N

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

Więc po prostu użyj tej metody, aby uzyskać wartości liczbowe

$("#logo").cssNumber("top")
Ivan Castellanos
źródło
13

Nieco bardziej praktyczna / wydajna wtyczka oparta na odpowiedzi Ivana Castellanosa (która została oparta na odpowiedzi M4N). Użycie || 0spowoduje przekonwertowanie Nan na 0 bez etapu testowania.

Podałem również warianty float i int, aby pasowały do ​​zamierzonego zastosowania:

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

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

Stosowanie:

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

Testuj skrzypce na http://jsfiddle.net/TrueBlueAussie/E5LTu/

Gone Coding
źródło
Wydawałoby się, że należy albo zawsze używać cssFloat, albo wziąć pod uwagę, że cssInt usunie wartość taką jak 25,9999999px do 25.
justingordon
1
@justingordon: To jest prawidłowe zachowanie obcięcia liczby całkowitej dla int, więc tak naprawdę sprowadza się do wymaganego użycia wartości.
Gone Coding