Как получить только числовую часть свойства CSS с помощью jQuery?

Мне нужно сделать численный расчет на основе свойств CSS. Однако, когда я использую это, чтобы получить информацию:

$(this).css('marginBottom')

возвращает значение «10px». Есть ли хитрость в том, чтобы просто получить числовую часть значения, независимо от того, является оно pxили %или emили иным?

Это очистит все не-цифры, не-точки и не-минус из строки:

$(this).css('marginBottom').replace(/[^-\d\.]/g, '');

ОБНОВЛЕНО для отрицательных значений

parseInt($(this).css('marginBottom'), 10);

parseInt будет автоматически игнорировать единицы.

Например:

var marginBottom = "10px";
marginBottom = parseInt(marginBottom, 10);
alert(marginBottom); // alerts: 10

При использовании метода replace значение css является строкой, а не числом.

Этот метод более чистый, простой и возвращает число:

parseFloat($(this).css('marginBottom'));

parseFloat($(this).css('marginBottom'))

Даже если marginBottom определен в em, значение внутри parseFloat выше будет в px, так как это вычисляемое свойство CSS.

$(this).css('marginBottom').replace('px','')

Я использую простой плагин jQuery, чтобы вернуть числовое значение любого отдельного свойства CSS.

Это относится parseFloatк значению, возвращаемому методом jQuery по умолчанию css.

Определение плагина:

$.fn.cssNum = function(){
  return parseFloat($.fn.css.apply(this,arguments));
}

Использование:

var element = $('.selector-class');
var numericWidth = element.cssNum('width') * 10 + 'px';
element.css('width', numericWidth);

Предположим, у вас установлено свойство margin-bottom 20px / 20% / 20em. Чтобы получить значение в виде числа, есть два варианта:

Опция 1:

parseInt($('#some_DOM_element_ID').css('margin-bottom'), 10);

Функция parseInt () анализирует строку и возвращает целое число. Не изменяйте 10 в приведенной выше функции (известной как «основание»), если вы не знаете, что делаете.

Пример вывода будет: 20 (если для поля установлено нижнее поле в пикселях) для%, и em будет выводить относительное число на основе текущего размера родительского элемента / шрифта.

Вариант 2 (лично я предпочитаю этот вариант)

parseFloat($('#some_DOM_element_ID').css('margin-bottom'));

Пример вывода будет: 20 (если для поля установлено нижнее поле в пикселях) для%, и em будет выводить относительное число на основе текущего размера родительского элемента / шрифта.

Функция parseFloat () анализирует строку и возвращает число с плавающей запятой.

Функция parseFloat () определяет, является ли первый символ в указанной строке числом. Если это так, он анализирует строку, пока не достигнет конца числа, и возвращает число как число, а не как строку.

Преимущество варианта 2 состоит в том, что если вы получите возвращенные десятичные числа (например, 20.32322px), вы получите возвращаемое число со значениями после десятичной точки. Полезно, если вам нужно вернуть конкретные числа, например, если нижнее поле установлено в em или %

parseintбудет обрезать любые десятичные значения (например, 1.5emдает 1).

Попробуйте replaceфункцию с регулярным выражением, например

$this.css('marginBottom').replace(/([\d.]+)(px|pt|em|%)/,'$1');

Идти за:

Math.abs(parseFloat($(this).css("property")));

Самый простой способ получить ширину элемента без единиц измерения:

target.width()

Источник: https://api.jquery.com/width/#width2

Вы можете реализовать этот очень простой плагин jQuery :

Определение плагина:

(function($) {
   $.fn.cssValue = function(p) {
      var result;
      return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
   };
})(jQuery);

Он устойчив к NaNзначениям, которые могут встречаться в старой версии IE (будет возвращаться 0вместо)

Использование:

$(this).cssValue('marginBottom');

Наслаждайтесь! :)

Для улучшения принятого ответа используйте это:

Number($(this).css('marginBottom').replace(/[^-\d\.]/g, ''));

Если это только для «px», вы также можете использовать:

$(this).css('marginBottom').slice(0, -2);

Следует удалить единицы, сохраняя при этом десятичные дроби.

var regExp = new RegExp("[a-z][A-Z]","g");
parseFloat($(this).css("property").replace(regExp, ""));

использование

$(this).cssUnit('marginBottom');

которые возвращают массив. Первый индекс возвращает значение нижней границы поля (например, 20 для 20 пикселей), а второй индекс возвращает единицу нижней части поля (пример px для 20 пикселей).