Вопрос по css, javascript, parsing, jquery – Как получить только числовую часть свойства CSS с помощью jQuery?

151

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

$(this).css('marginBottom')

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

Ваш Ответ

15   ответов
8
$(this).css('marginBottom').replace('px','')
Это будет обрабатывать только «px». дело. Поэтому я предполагаю, что должна быть сделана отдельная замена для каждого из оставшихся «суффиксов».
вот о чем я думал - есть ли какие-нибудь библиотечные процедуры для этого? Как я думаю, это довольно разумное условие, чтобы ожидать px, но в целях надежности, каковы наши варианты ...? (Просто размышляю, здесь - я не буду слишком сильно беспокоиться об этом, так как я контролирую значения)
Будьте осторожны - остальные суффиксы не в пикселях, так что если вы ожидаетеpx но даныem вам нужно конвертировать.
274
parseInt($(this).css('marginBottom'), 10);

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

Например:

var marginBottom = "10px";
marginBottom = parseInt(marginBottom, 10);
alert(marginBottom); // alerts: 10
Возможно, вы захотите добавить radix (10) в parseInt, если вы используете это решение.
Это, кажется, работает очень хорошо во всех случаях, на которые я наткнулся, и я считаю, что это гораздо более читабельно, чем любые решения регулярных выражений.
10 является только значением по умолчанию для parseInt, если число не может быть интерпретировано как восьмеричное (например, "0700" будет восприниматься как 448, а не 700, что, вероятно, является желательным).
На самом деле parseInt не нуждается, 10. параметр radix, так как 10 по умолчанию. Меньше параметров = лучшая читаемость, более короткий код, меньше ошибок.
Вы можете использоватьparseFloat вместоparseInt для учета случая, когда вы получаете нецелое значение - как вmaximelebreton's answer.
2

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

Идти за:

Math.abs(parseFloat($(this).css("property")));
Не универсальное решение. В большинстве случаев, я думаю, я хочу знатьmargin отрицательно или положительно!
13
parseFloat($(this).css('marginBottom'))

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

parseFloat имеет только один аргумент - основание (10), которое вы здесь указали, будет проигнорировано. Таким образом, более правильный ответ будетmaximelebreton's.
Должно ли это быть parseFloat ($ (this) .css ('marginBottom'), 10)
116

а не числом.

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

parseFloat($(this).css('marginBottom'));
Лучшее решение, спасибо!
Это лучшее решение, так как OP запрашивает возможные нецелые единицы (%, em)
3

target.width()

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

Отлично подходит для ширины и высоты. $ (селектор) .width () и $ (селектор) .height () действительно являются числами. Не полезно для других css реквизитов: поля, отступы.
4

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

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

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

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

Option 1:

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

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

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

Option 2 (I personally prefer this option)

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

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

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

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

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

0

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

jQuery плагин:

Plugin Definition:

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

Устойчив кNaN значения, которые могут встречаться в старой версии IE0 вместо)

Usage:

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

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

Это хорошая идея, но не забывайте следить за побочными эффектами, такими как вызов функции с неизвестной стоимостью больше, чем необходимо.var result; return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
спасибо @NickC. Отметил
2

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

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

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

Это не должен быть принятый ответ, потому что он не отвечает на вопрос правильно. Решения parseFloat / parseInt лучше. Вопрос задается в отношенииnumeric calculations, Этот ответ возвращает строку. Это означает, что «20» + 20 = "2020" что не подходит ни для кого.
Рассмотреть возможность использованияparseFloat какие ручкиall символы допускаются в числах с плавающей запятой, а также возвращаетnumber вместо строки - см.maximelebreton's answer.
Это замечательно, если вы не имеете дело с отрицательными числами. Я не гуру регулярных выражений, поэтому не могу предоставить лучший образец :)
@gary: Спасибо за указание. Я обновил ответ
@ Александр Квадратные скобки с кареткой означают НЕ: [^ & lt; все, что вы здесь указали & gt;]. В этом регулярном выражении он соответствует любому символу, который НЕ является знаком минус, цифрой или точкой. По существу удаляет все, что не может быть частью номера
5

го отдельного свойства CSS.

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

Plugin Definition:

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

Usage:

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

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

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

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

На самом деле cssUnit является частью jQueryUI, а не jQuery.

Похожие вопросы