使用 jQuery 以像素为单位的填充或边距值作为整数
Posted
技术标签:
【中文标题】使用 jQuery 以像素为单位的填充或边距值作为整数【英文标题】：Padding or margin value in pixels as integer using 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/…
【参考方案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。见：***.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/innerWidthapi.jquery.com/widthapi.jquery.com/outerWidththat.outerHeight(true) - that.outerHeight() 将给出总垂直边距，因为 outerHeight() 将包括填充和边框但不包括边距。见api.jquery.com/outerWidth/。
同意 Andrew 的观点（并且已经编辑过答案），您需要使用 height 而不是 innerHeight 来获得总边距、边框和内边距以上是关于使用 jQuery 以像素为单位的填充或边距值作为整数的主要内容，如果未能解决你的问题，请参考以下文章