Получить верхнее значение css как число, а не строку?
В jQuery вы можете получить верхнюю позицию относительно родителя как число, но вы не можете получить верхнее значение css как число, если оно было установлено в px.
Скажем, у меня есть следующее:
#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'
Но я хочу иметь свойство css top как число 10.
Как этого добиться?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать функцию parseInt () для преобразования строки в число, например:
parseInt($('#elem').css('top'));
Обновлять: (как предлагает Бен): вы также должны указать систему счисления:
parseInt($('#elem').css('top'), 10);
Принудительно анализирует его как десятичное число, в противном случае строки, начинающиеся с «0», могут быть проанализированы как восьмеричное число (может зависеть от используемого браузера).
Хотя это может быть число с плавающей запятой, поэтому лучше использовать parseFloat.
Плагин jQuery, основанный на ответе M4N
jQuery.fn.cssNumber = function(prop){
var v = parseInt(this.css(prop),10);
return isNaN(v) ? 0 : v;
};
Итак, вы просто используете этот метод для получения числовых значений
$("#logo").cssNumber("top")
Чуть более практичный / эффективный плагин, основанный на ответе Ивана Кастелланоса (который был основан на ответе M4N). Использование || 0 преобразует Nan в 0 без этапа тестирования.
Я также предоставил варианты float и int для предполагаемого использования:
jQuery.fn.cssInt = function (prop) {
return parseInt(this.css(prop), 10) || 0;
};
jQuery.fn.cssFloat = function (prop) {
return parseFloat(this.css(prop)) || 0;
};
Применение:
$('#elem').cssInt('top'); // e.g. returns 123 as an int
$('#elem').cssFloat('top'); // e.g. Returns 123.45 as a float
Тестовая рабочий пример на http://jsfiddle.net/TrueBlueAussie/E5LTu/
Казалось бы, нужно либо всегда использовать cssFloat, либо учитывать, что cssInt разделит значение вроде 25.9999999px до 25.
@justingordon: это правильное поведение целочисленного усечения для int, поэтому на самом деле все сводится к необходимому использованию значения.
Вы также должны указать систему счисления: parseInt ($ ('# elem'). Css ('top'), 10); Заставляет его анализировать как базу 10, в противном случае строки, начинающиеся с '0', будут анализироваться в базе 8.