Заполнение или значение поля в пикселях в виде целого числа с использованием jQuery

Question

jQuery имеет функции height () и width (), которые возвращают высоту или ширину в пикселях в виде целого числа ...

Как получить значение отступа или поля для элемента в пикселях и как целое число с помощью jQuery?

Моей первой идеей было сделать следующее:

var padding = parseInt(jQuery("myId").css("padding-top"));

Но если, например, в ems дано дополнение, как я могу получить значение в пикселях?

---

Глядя на плагин JSizes, предложенный Крисом Пебблом, я понял, что моя собственная версия была правильной :). jQuery всегда возвращает значение в пикселях, так что просто разобрать его в целое число было решением.

Спасибо Крису Пебблу и Иану Робинсону

Answer 1

Не использовать string.replace ("px", ""));

Используйте parseInt или parseFloat!

Answer 2

Не до некро, но я сделал это, что может определять пиксели на основе различных значений:

$.fn.extend({
  pixels: function (property, base) {
    var value = $(this).css(property);
    var original = value;
    var outer = property.indexOf('left') != -1 || property.indexOf('right') != -1 
      ? $(this).parent().outerWidth()
      : $(this).parent().outerHeight();

    // EM Conversion Factor
    base = base || 16;

    if (value == 'auto' || value == 'inherit') 
        return outer || 0;

    value = value.replace('rem', '');
    value = value.replace('em', '');

    if (value !== original) {
       value = parseFloat(value);
       return value ? base * value : 0;
    }

    value = value.replace('pt', '');

    if (value !== original) {
       value = parseFloat(value);
       return value ? value * 1.333333 : 0; // 1pt = 1.333px
    }

    value = value.replace('%', '');

    if (value !== original) {
      value = parseFloat(value);
      return value ? (outer * value / 100) : 0;
    }

    value = value.replace('px', '');
    return parseFloat(value) || 0;
  }
});

Таким образом, мы учитываем размеры и авто / наследуем.

Answer 3

Бесстыдно принят от Quickredfox .

jQuersy.fn.cssNum = function(){
    return parseInt(jQuery.fn.css.apply(this, arguments), 10);
};

обновление

Изменено на parseInt(val, 10), поскольку оно быстрее, чем parseFloat.

http://jsperf.com/number-vs-plus-vs-toint-vs-tofloat/20

Answer 4

Я, вероятно, использую github.com / bramstein / jsizes плагин jquery для заполнения и полей очень удобным способом, спасибо ...