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

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

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

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

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

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

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

Благодаря Крис Пеббл и Ян Робинсон

Вы должны быть в состоянии использовать CSS ( http://docs.jquery.com/CSS/css#name ). Возможно, вам придется быть более конкретным, например, «padding-left» или «margin-top».

Пример:

CSS

a, a:link, a:hover, a:visited, a:active {color:black;margin-top:10px;text-decoration: none;}

JS

$("a").css("margin-top");

Результат 10px.

Если вы хотите получить целочисленное значение, вы можете сделать следующее:

parseInt($("a").css("margin-top"))

Сравните внешнюю и внутреннюю высоту / ширину, чтобы получить общий запас и отступ:

var that = $("#myId");
alert(that.outerHeight(true) - that.innerHeight());

Функция parseInt имеет параметр radix, который определяет систему счисления, используемую при преобразовании, поэтому вызов parseInt(jQuery('#something').css('margin-left'), 10);возвращает левое поле как целое число.

Это то, что использует JSizes.

ПОЖАЛУЙСТА, не загружайте другую библиотеку только для того, чтобы сделать то, что уже доступно изначально!

jQuery .css()для начала конвертирует% и em в пиксельные эквиваленты, parseInt()удаляет 'px'из конца возвращаемой строки и конвертирует в целое число:

http://jsfiddle.net/BXnXJ/

$(document).ready(function () {
    var $h1 = $('h1');
    console.log($h1);
    $h1.after($('<div>Padding-top: ' + parseInt($h1.css('padding-top')) + '</div>'));
    $h1.after($('<div>Margin-top: ' + parseInt($h1.css('margin-top')) + '</div>'));
});

Вот как вы можете получить окружающие размеры:

var elem = $('#myId');

var marginTopBottom  = elem.outerHeight(true) - elem.outerHeight();
var marginLeftRight  = elem.outerWidth(true)  - elem.outerWidth();

var borderTopBottom  = elem.outerHeight() - elem.innerHeight();
var borderLeftRight  = elem.outerWidth()  - elem.innerWidth();

var paddingTopBottom  = elem.innerHeight() - elem.height();
var paddingLeftRight  = elem.innerWidth()  - elem.width();

Обратите внимание, что каждая переменная, paddingTopBottomнапример, содержит сумму полей с обеих сторон элемента; то есть paddingTopBottom == paddingTop + paddingBottom. Интересно, есть ли способ получить их отдельно. Конечно, если они равны, вы можете разделить на 2 :)

Эта простая функция сделает это:

$.fn.pixels = function(property) {
    return parseInt(this.css(property).slice(0,-2));
};

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

var padding = $('#myId').pixels('paddingTop');

Parse int

parseInt(canvas.css("margin-left")); 

возвращает 0 для 0px

Вы можете просто взять их, как с любым атрибутом CSS :

alert($("#mybox").css("padding-right"));
alert($("#mybox").css("margin-bottom"));

Вы можете установить их с помощью второго атрибута в методе css:

$("#mybox").css("padding-right", "20px");

РЕДАКТИРОВАТЬ: Если вам нужно только значение пикселя, используйте parseInt(val, 10):

parseInt($("#mybox").css("padding-right", "20px"), 10);

хорошо, просто чтобы ответить на оригинальный вопрос:

вы можете получить отступ как целое число, которое можно использовать следующим образом:

var padding = parseInt ($ ("myId"). css ("padding-top"). replace ("ems", ""));

Если вы определили другое измерение, например, px, просто замените «ems» на «px». parseInt интерпретирует строковую часть как неправильное значение, поэтому важно заменить его ... ничем.

Вы также можете расширить фреймворк jquery чем-то вроде:

jQuery.fn.margin = function() {
var marginTop = this.outerHeight(true) - this.outerHeight();
var marginLeft = this.outerWidth(true) - this.outerWidth();

return {
    top: marginTop,
    left: marginLeft
}};

Тем самым добавляется функция в ваши объекты jquery под названием margin (), которая возвращает коллекцию, например функцию смещения.

FX.

$("#myObject").margin().top

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

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

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

Бесстыдно принятый от 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

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

$.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;
  }
});

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