it-swarm.com.ru

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

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

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

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

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

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


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

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

202
Malik Amurlayev

Вы должны быть в состоянии использовать 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"))
223
Ian Robinson

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

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

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

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

35
guigouz

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

функция .css() в jQuery преобразует% и 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>'));
});
29
RavenHursT

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

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

11
FireAphis

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

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

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

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

Parse int

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

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

9
a53-416

Вы можете просто взять их как любой атрибут 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);
8
Robert Grant

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

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

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

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

3
EeKay

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

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

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

1
RubbelDeCatc

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

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

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

0
Nijikokun

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

0
yckart

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

0
Mustafah