Padding หรือค่ามาร์จิ้นเป็นพิกเซลเป็นจำนวนเต็มโดยใช้ jQuery

jQuery มีฟังก์ชั่น height () en width () ที่ส่งคืนความสูงหรือความกว้างเป็นพิกเซลเป็นจำนวนเต็ม ...

ฉันจะรับค่า padding หรือ margin ขององค์ประกอบเป็นพิกเซลและเป็นจำนวนเต็มโดยใช้ jQuery ได้อย่างไร

ความคิดแรกของฉันคือการทำต่อไปนี้:

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

แต่ถ้ามีการเว้นระยะห่างเป็น ems เช่นฉันจะรับค่าเป็นพิกเซลได้อย่างไร

เมื่อพิจารณาถึงปลั๊กอิน JSizes ที่ Chris Pebble แนะนำให้ฉันรู้ว่าเวอร์ชันของฉันเองนั้นเหมาะสมแล้ว :) jQuery คืนค่าเป็นพิกเซลเสมอดังนั้นการแยกวิเคราะห์เป็นจำนวนเต็มจึงเป็นวิธีแก้ปัญหา

ขอบคุณ Chris Pebble และ 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");

ผลลัพธ์ที่ได้คือ 10px

หากคุณต้องการรับค่าจำนวนเต็มคุณสามารถทำสิ่งต่อไปนี้:

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

เปรียบเทียบความสูง / ความกว้างด้านนอกและด้านในเพื่อรับระยะขอบและการเติมเต็ม:

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

ฟังก์ชั่น parseInt มีพารามิเตอร์ "radix" ซึ่งกำหนดระบบตัวเลขที่ใช้ในการแปลงดังนั้นการโทรparseInt(jQuery('#something').css('margin-left'), 10);จะส่งคืนระยะขอบซ้ายเป็น Integer

นี่คือสิ่งที่ JSizes ใช้

โปรดอย่าไปโหลดไลบรารีอื่นเพื่อทำสิ่งที่มีอยู่แล้วโดยกำเนิด!

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

นี่คือวิธีที่คุณจะได้รับมิติโดยรอบ:

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

แก้ไข: หากคุณต้องการเพียงแค่ค่าพิกเซลให้ใช้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

ไม่ใช่ไปที่ necro แต่ฉันทำสิ่งนี้ซึ่งสามารถกำหนดพิกเซลตามค่าที่หลากหลาย:

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

ด้วยวิธีนี้เราคำนึงถึงขนาดและ auto / สืบทอด