使用 jQuery 以像素为单位的填充或边距值作为整数答案

【问题标题】：Padding or margin value in pixels as integer using jQuery使用 jQuery 以像素为单位的填充或边距值作为整数
【发布时间】：2010-10-10 02:07:58
【问题描述】：

jQuery 有 height() 和 width() 函数，它们以整数形式返回像素的高度或宽度...

如何使用 jQuery 获取元素的填充或边距值像素和整数？

我的第一个想法是做以下事情：

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

但是，例如，如果填充以 em 为单位，我怎样才能获得以像素为单位的值？

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

感谢 Chris Pebble 和 Ian Robinson

【问题讨论】：

您能从下面的答案中选择一个答案吗？
在此线程中的人们注意：使用 parseInt 时始终指定基数。引用 MDN：“radix 一个介于 2 和 36 之间的 int，表示上述字符串的基数（数学数字系统中的基数）。指定 10 表示十进制数字系统。始终指定这个参数以消除读者混淆并保证可预测的行为。当未指定基数时，不同的实现会产生不同的结果，通常将值默认为 10。见：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript jquery css

【解决方案1】：

您应该能够使用 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"))

【讨论】：

我没有检查 jQuery 方法是否真的返回“px”后缀，但是来自另一个答案（我最终使用）的 JSizes 插件在返回时返回一个整数值被传递到ParseInt(...)，仅供参考。
仅供参考：jQuery 确实添加了“px”，因此 Ian 的解决方案有效，并且在传递给 parseInt() 时也会返回一个整数——它不需要插件：parseInt($('a').css('margin-top').replace('px', ''))跨度>
parseInt 在 chrome 上比 replace('px','') 快 49% jsperf.com/replace-vs-parseint
如果在 CSS 中 padding/margin 用 em 或 pt 表示，.css() 还会返回以“px”结尾的值吗？
@ingredient_15939 - 刚刚尝试过，是的；它计算实际的像素值并用 px 返回它。边框宽度相同。我知道老问题，但由于没有人回答你的问题，我想我会这样做来帮助其他后来者......

【解决方案2】：

不要使用 string.replace("px", ""));

使用 parseInt 或 parseFloat！

【讨论】：

【解决方案3】：

请不要仅仅为了做一些本机可用的事情而去加载另一个库！

jQuery 的 .css() 将 %'s 和 em's 转换为与开头等效的像素，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>'));
});

【讨论】：

【解决方案4】：

不要死，但我做了这个，它可以根据各种值确定像素：

$.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()是错误的，宽高可以是浮点数。

【解决方案5】：

被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

【讨论】：

【解决方案6】：

您可以像使用any CSS attribute 一样获取它们：

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

【讨论】：

【解决方案7】：

解析整数

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

0px 返回 0

【讨论】：

【解决方案8】：

我可能以非常舒适的方式使用github.com/bramstein/jsizes jquery 插件来填充和边距，谢谢...

【讨论】：

【解决方案9】：

获取周围尺寸的方法如下：

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

【讨论】：

true = 包括边距。 +1000 个互联网
这是最好的解决方案，因为它也适用于IE 7。见：stackoverflow.com/questions/590602/…

【解决方案10】：

这个简单的函数就可以做到：

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

用法：

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

【讨论】：

不考虑 auto、inherit 和 % 值
@Thomas：不正确。 jsfiddle.net/nXyFN jQuery 似乎总是以像素为单位返回结果。
@Mark jsfiddle.net/BNQ6S IE7: NaN，这取决于浏览器。据我所知，jQuery 不像 .width() 和 .height() 那样不会规范化 .css()
@Thomas：很有趣。伊恩的解决方案（顶级）当时也有同样的问题。 svinto 的解决方案可能是最好的。

【解决方案11】：

parseInt 函数有一个“radix”参数，它定义了转换中使用的数字系统，因此调用parseInt(jQuery('#something').css('margin-left'), 10); 会将左边距作为整数返回。

这是 JSizes 使用的。

【讨论】：

谢谢你，我讨厌必须包含用于小功能的插件。
您甚至不需要传递“基数”，因为它默认为 10。
请注意 parseInt 可以返回 NaN（然后基于该变量的计算失败） - 之后添加 isNaN 检查！示例案例：parseInt('auto', 10);（auto 是有效的margin-left）。
@sethAlexanderBird 您正确地指出基数将默认为 10，但是如果代码 linting 对您很重要（并且可能应该如此），如果您忽略它，jsLint 和 jsHint 将会对您大喊大叫。

【解决方案12】：

好的，只是回答原来的问题：

您可以像这样将填充作为可用整数：

var 填充 = parseInt($("myId").css("padding-top").replace("ems",""));

如果您定义了另一个测量值，例如 px，只需将“ems”替换为“px”。 parseInt 将 stringpart 解释为错误的值，因此将其替换为 ... 很重要。

【讨论】：

【解决方案13】：

您也可以自己扩展 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() 的函数，该函数返回一个类似于 offset 函数的集合。

外汇。

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

【讨论】：

不幸的是，这并没有给你上边距和左边距，而是给你 totalVertical 和 totalHorizontal 边距
但是可以在其他解决方案之一中使用 parseInt 函数对其进行编辑，以实现更无缝的边距函数显示

【解决方案14】：

比较外部和内部高度/宽度以获得总边距和填充：

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

【讨论】：

我没有意识到存在 externalHeight。非常感谢！
请记住，outerWidth/Height 也包含边框宽度
innertWidth/innerHeight 在他们的计算中也包含了 padding，要得到不带 padding 的宽度/高度，你需要使用 .width() 和 .height()。 api.jquery.com/innerWidth api.jquery.com/width api.jquery.com/outerWidth
that.outerHeight(true) - that.outerHeight() 将给出总垂直边距，因为 outerHeight() 将包括填充和边框但不包括边距。见api.jquery.com/outerWidth/。
同意 Andrew 的观点（并且已经编辑过答案），您需要使用 height 而不是 innerHeight 来获得总边距、边框和内边距