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

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

$(this).css('marginBottom')

возвращает значение '10px'. Есть ли уловка только для того, чтобы получить номер части значения независимо от того, является ли она px или % или em или что-то еще?

Ответ 1

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

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

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

Ответ 2

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

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

Например:

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

Ответ 3

С помощью метода replace ваше значение css представляет собой строку, а не число.

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

Я использую простой плагин 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);

Ответ 7

Id для:

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

Ответ 8

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

Вариант 1:

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

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

Результат будет равен: 20 (если значение margin-bottom установлено в px) для% и em, оно выведет относительное число, основанное на текущем размере родительского элемента/шрифта.

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

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

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

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

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

Ответ 9

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

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

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

Ответ 10

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

target.width()

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

Ответ 11

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

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

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

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

Применение:

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

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

Ответ 12

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

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

Ответ 13

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

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

Ответ 14

Следует удалять единицы, сохраняя десятичные знаки.

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

Ответ 15

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

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

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