Як отримати просто числову частину властивості 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

У методі заміни ваше значення 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);

Припустимо, у вас властивість в нижній частині поля встановлено на 20 пікселів / 20% / 20ем. Щоб отримати значення як число, є два варіанти:

Варіант 1:

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

Функція parseInt () аналізує рядок і повертає ціле число. Не змінюйте 10 знайдених у вищевказаній функції (відомі як "радіакс"), якщо ви не знаєте, що ви робите.

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

Варіант 2 (я особисто віддаю перевагу цьому варіанту)

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

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

Функція parseFloat () аналізує рядок і повертає число з плаваючою комою.

Функція parseFloat () визначає, чи є першим символом у вказаному рядку число. Якщо це так, він аналізує рядок, поки не досягне кінця числа, і повертає число як число, а не як рядок.

Перевага Варіанту 2 полягає в тому, що якщо ви отримаєте десяткові числа, що повертаються (наприклад, 20.32322px), ви отримаєте повернене число зі значеннями за десятковою комою. Корисно, якщо вам потрібні певні номери, які повертаються, наприклад, якщо ваш нижній запас встановлений в em або %

parseintскоротить будь-які десяткові значення (наприклад, 1.5emдає 1).

Спробуйте replaceфункцію з regex, наприклад

$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 пікселів )