Wartość wypełnienia lub marginesu w pikselach jako liczba całkowita przy użyciu jQuery

jQuery ma funkcje height () en width (), które zwracają wysokość lub szerokość w pikselach jako liczbę całkowitą ...

Jak uzyskać wartość wypełnienia lub marginesu elementu w pikselach i liczbach całkowitych za pomocą jQuery?

Moim pierwszym pomysłem było wykonanie następujących czynności:

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

Ale jeśli na przykład podano ems, to jak mogę uzyskać wartość w pikselach?

Przeglądając wtyczkę JSizes, sugerowaną przez Chrisa Pebble'a, zdałem sobie sprawę, że moja własna wersja była właściwa :). jQuery zwraca zawsze wartość w pikselach, więc rozwiązaniem było właśnie parsowanie jej do liczby całkowitej.

Dzięki Chris Pebble i Ian Robinson

Powinieneś być w stanie korzystać z CSS ( http://docs.jquery.com/CSS/css#name ). Być może będziesz musiał być bardziej szczegółowy, np. „Padding-left” lub „margin-top”.

Przykład:

CSS

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

JS

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

Wynik to 10 pikseli.

Jeśli chcesz uzyskać wartość całkowitą, możesz wykonać następujące czynności:

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

Porównaj zewnętrzną i wewnętrzną wysokość / szerokość, aby uzyskać całkowity margines i wypełnienie:

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

Funkcja parseInt ma parametr „radix”, który definiuje system liczbowy używany podczas konwersji, więc wywołanie parseInt(jQuery('#something').css('margin-left'), 10);zwraca lewy margines jako liczbę całkowitą.

Właśnie tego używa JSizes.

PROSZĘ nie ładuj innej biblioteki, aby zrobić coś, co jest już dostępne natywnie!

jQuery's .css()konwertuje% i em na ich ekwiwalent pikselowy na początek, i parseInt()usuwa 'px'koniec końca zwracanego ciągu i konwertuje go na liczbę całkowitą:

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

Oto, w jaki sposób możesz uzyskać otaczające wymiary:

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();

Zwróć uwagę, że paddingTopBottomna przykład każda zmienna zawiera sumę marginesów po obu stronach elementu; tj paddingTopBottom == paddingTop + paddingBottom. Zastanawiam się, czy istnieje sposób, aby uzyskać je osobno. Oczywiście, jeśli są równe, możesz podzielić przez 2 :)

Ta prosta funkcja to zrobi:

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

Stosowanie:

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

Parse int

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

zwraca 0 dla 0px

Możesz je po prostu pobrać jak w przypadku dowolnego atrybutu CSS :

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

Możesz ustawić je za pomocą drugiego atrybutu w metodzie css:

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

EDYCJA: Jeśli potrzebujesz tylko wartości w pikselach, użyj parseInt(val, 10):

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

ok, aby odpowiedzieć na oryginalne pytanie:

możesz uzyskać dopełnienie jako użyteczną liczbę całkowitą taką jak ta:

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

Jeśli zdefiniowałeś inny pomiar, np. Px, po prostu zamień „ems” na „px”. parseInt interpretuje stringpart jako złą wartość, dlatego ważne jest, aby zastąpić go ... nic.

Możesz także samodzielnie rozszerzyć framework jquery o coś takiego:

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

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

W ten sposób dodajemy funkcję do twoich obiektów jquery o nazwie margin (), która zwraca kolekcję taką jak funkcja offset.

fx.

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

Nie używaj string.replace („px”, „”));

Użyj parseInt lub parseFloat!

Prawdopodobnie używam wtyczki jiteryjnej github.com/bramstein/jsizes do wypełnień i marginesów w bardzo wygodny sposób, dzięki ...

Bezwstydnie przyjęty przez Quickredfox .

jQuersy.fn.cssNum = function(){
    return parseInt(jQuery.fn.css.apply(this, arguments), 10);
};

aktualizacja

Zmieniono na, parseInt(val, 10)ponieważ jest szybszy niż parseFloat.

http://jsperf.com/number-vs-plus-vs-toint-vs-tofloat/20

Nie chcę tego robić, ale zrobiłem to, co może określać piksele na podstawie różnych wartości:

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

W ten sposób bierzemy pod uwagę wielkość i auto / dziedziczenie.