Đệm hoặc giá trị lề theo pixel dưới dạng số nguyên bằng jQuery

jQuery có các hàm height () en width () trả về chiều cao hoặc chiều rộng tính bằng pixel dưới dạng số nguyên ...

Làm cách nào tôi có thể nhận được giá trị đệm hoặc giá trị lề của một phần tử bằng pixel và dưới dạng số nguyên bằng jQuery?

Ý tưởng đầu tiên của tôi là làm như sau:

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

Nhưng nếu phần đệm được đưa ra trong ví dụ như vậy, làm thế nào tôi có thể nhận được giá trị bằng pixel?

Nhìn vào plugin JSizes được đề xuất bởi Chris Pebble tôi nhận ra rằng phiên bản của riêng tôi là đúng :). jQuery trả về giá trị luôn bằng pixel, vì vậy chỉ cần phân tích cú pháp thành số nguyên là giải pháp.

Cảm ơn Chris Pebble và Ian Robinson

Bạn sẽ có thể sử dụng CSS ( http://docs.jquery.com/CSS/css#name ). Bạn có thể phải cụ thể hơn, chẳng hạn như "padding-left" hoặc "margin-top".

Thí dụ:

CSS

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

Mã não

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

Kết quả là 10px.

Nếu bạn muốn lấy giá trị nguyên, bạn có thể làm như sau:

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

So sánh chiều cao / chiều rộng bên ngoài và bên trong để có được tổng lề và phần đệm:

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

Chức năng parseInt có một "cơ số" tham số trong đó xác định các hệ thống số sử dụng trên chuyển đổi, cho nên gọi parseInt(jQuery('#something').css('margin-left'), 10);trở về lề trái như một Integer.

Đây là những gì mà JSizes sử dụng.

Xin đừng tải thư viện khác chỉ để làm một cái gì đó vốn đã có sẵn!

jQuery .css()chuyển đổi% 's và em thành pixel của chúng tương đương với bắt đầu bằng và parseInt()sẽ loại bỏ 'px'phần cuối của chuỗi được trả về và chuyển đổi nó thành một số nguyên:

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

Đây là cách bạn có thể có được các dimentions xung quanh:

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

Hãy chú ý rằng mỗi biến, paddingTopBottomví dụ, chứa tổng các lề trên cả hai mặt của phần tử; ví dụ paddingTopBottom == paddingTop + paddingBottom. Tôi tự hỏi nếu có một cách để có được chúng một cách riêng biệt. Tất nhiên, nếu chúng bằng nhau, bạn có thể chia cho 2 :)

Hàm đơn giản này sẽ làm điều đó:

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

Sử dụng:

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

Phân tích cú pháp

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

trả về 0 cho 0px

Bạn chỉ có thể lấy chúng như với bất kỳ thuộc tính CSS nào :

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

Bạn có thể đặt chúng với thuộc tính thứ hai trong phương thức css:

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

EDIT: Nếu bạn chỉ cần giá trị pixel, hãy sử dụng parseInt(val, 10):

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

ok chỉ để trả lời câu hỏi ban đầu:

bạn có thể lấy phần đệm dưới dạng số nguyên có thể sử dụng như thế này:

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

Nếu bạn đã xác định một phép đo khác như px, chỉ cần thay thế "ems" bằng "px". parseInt diễn giải chuỗi thành một giá trị sai vì vậy điều quan trọng là thay thế nó bằng ... không có gì.

Bạn cũng có thể tự mở rộng khung jquery bằng một cái gì đó như:

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

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

Do đó, thêm một hàm trên các đối tượng jquery của bạn được gọi là lề (), trả về một bộ sưu tập như hàm bù.

fx.

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

Đừng sử dụng string.replace ("px", ""));

Sử dụng parseInt hoặc parseFloat!

Tôi có thể sử dụng plugin github.com/bramstein/jsizes jquery cho phần đệm và lề theo cách rất thoải mái, Cảm ơn ...

Không biết xấu hổ nhận từ Quickredfox .

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

cập nhật

Thay đổi parseInt(val, 10)vì nó nhanh hơn parseFloat.

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

Không phải là hoại tử nhưng tôi đã thực hiện điều này có thể xác định pixel dựa trên nhiều giá trị khác nhau:

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

Bằng cách này, chúng tôi tính đến kích thước và tự động / kế thừa.