Значення прокладки або поля в пікселях як ціле число, використовуючи jQuery

jQuery має функцію висоти () та ширини (), яка повертає висоту чи ширину в пікселях як ціле число ...

Як я можу отримати прокладку або значення поля в пікселях і як ціле число за допомогою jQuery?

Першою моєю ідеєю було зробити наступне:

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

Але якщо, наприклад, накладка задана в ems, як я можу отримати значення в пікселях?

Заглянувши в плагін JSize, запропонований Крісом Пеблом, я зрозумів, що моя власна версія була правильною :). jQuery повертає завжди значення у пікселях, тому просто розбір його на ціле число був рішенням.

Завдяки Крісу Пебблу та Ian Robinson

Ви повинні мати можливість використовувати 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");

Результат - 10 пікселів.

Якщо ви хочете отримати ціле значення, ви можете зробити наступне:

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()перетворює% s та 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');

Аналіз 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");

EDIT: Якщо вам потрібно лише значення пікселя, використовуйте parseInt(val, 10):

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

добре, щоб відповісти на початкове запитання:

Ви можете отримати прокладку як ціле число, яке можна використовувати:

var padding = parseInt ($ ("myId"). css ("padding-top"). замінити ("ems", ""));

Якщо ви визначили інше вимірювання, наприклад, px, просто замініть "ems" на "px". parseInt трактує stringpart як неправильне значення, тому важливо замінити його на ... нічим.

Ви також можете розширити рамку 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;
  }
});

Таким чином, ми враховуємо розміри та автоматичне / успадковане.