jQuery有height() en width()函数,返回高度或宽度像素为整数…

我怎么能得到一个填充或边缘值的元素像素和整数使用jQuery?

我的第一个想法是:

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

但是,如果填充以ems为例,我如何才能得到以像素为单位的值?


查看由Chris Pebble建议的JSizes插件,我意识到我自己的版本是正确的:)。jQuery总是以像素为单位返回值,因此只需将其解析为整数就是解决方案。

感谢Chris Pebble和Ian Robinson


当前回答

解析int

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

0px返回0

其他回答

比较外部和内部的高度/宽度,得到总的边距和填充:

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

下面是你如何获得周围的尺寸:

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

你可以像使用任何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);

不是死灵,但我做了这个,可以确定基于各种值的像素:

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

这样,我们会考虑到大小和自动/继承。

好,我来回答刚才的问题

你可以像这样得到一个可用的整数:

瓦尔帕丁= parseInt美元(css myId”)。(“padding-top ems)。replace(“”、“”);

如果你定义了另一个测量值,如px,只需将“ems”替换为“px”。 parseInt将stringpart解释为错误的值,因此重要的是将其替换为…什么都没有。