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

Ответ 1

Вы должны иметь возможность использовать 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"))

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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>'));
});

Ответ 5

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

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:)

Ответ 6

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

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

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

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

Ответ 7

Parse int

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

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

Ответ 8

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

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

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

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

EDIT: если вам нужно только значение пикселя, используйте parseInt(val, 10):

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

Ответ 9

ok, чтобы ответить на исходный вопрос:

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

var padding = ParseInt ($ ( "MyId" ) CSS ( "набивка-топ" ) заменить ( "СЭМ", "").).

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

Ответ 10

Вы также можете расширить рамки 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

Ответ 11

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

Ответ 12

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

Ответ 13

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

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

Таким образом, мы учитываем размеры и auto/inherit.

Ответ 14

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

Использовать parseInt или parseFloat!