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

Question

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

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

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

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

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

---

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

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

Answer 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"))

Answer 2

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

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

Answer 3

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

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

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

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

Answer 6

Parse int

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

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

Answer 7

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

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

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

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

Answer 8

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

Answer 9

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

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

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

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

Answer 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