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

IT技术 javascript jquery css
2021-03-03 00:08:30

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

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

我的第一个想法是执行以下操作：

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

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

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

感谢 Chris Pebble 和 Ian Robinson

6个回答

您应该能够使用 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”，因此 Ian 的解决方案有效，并且在传递给 parseInt() 时还将返回一个整数——并且它不需要插件： parseInt($('a').css('margin-top').replace('px', ''))
2021-04-21 00:08:30
@ingredient_15939 - 刚试过，是的；它计算实际像素值并用 px 返回它。边框宽度相同。老问题我知道，但由于没有人回答你的问题，我想我会这样做来帮助其他后来者......
2021-04-24 00:08:30
在 chrome jsperf.com/replace-vs-parseint上，parseInt 比 replace('px','') 快 49%
2021-05-10 00:08:30
我还没有检查 jQuery 方法是否真的返回“px”后缀，但是JSizes当返回值传入时，另一个答案（我最终使用）的插件返回一个整数ParseInt(...)，仅供参考。
2021-05-15 00:08:30
如果 padding/margin 在 CSS 中表示为 em 或 pt，是否.css()仍会返回末尾带有“px”的值？
2021-05-16 00:08:30

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

var that = $("#myId");
alert(that.outerHeight(true) - that.innerHeight());
that.outerHeight(true) - that.outerHeight()将给出总垂直边距，因为 externalHeight() 将包括填充和边框但不包括边距。请参阅api.jquery.com/outerWidth/。
2021-04-20 00:08:30
我没有意识到 externalHeight 存在。非常感谢你！
2021-04-29 00:08:30
请记住，outerWidth/Height 也包括边框宽度
2021-05-02 00:08:30
innertWidth/innerHeight 在他们的计算中也包括 padding，要获得没有 padding 的宽度/高度，你需要使用 .width() 和 .height()。api.jquery.com/innerWidth api.jquery.com/width api.jquery.com/outerWidth
2021-05-04 00:08:30
同意安德鲁在这里（并已编辑答案这样说），您需要使用高度而不是innerHeight来获得总边距，边框和填充
2021-05-04 00:08:30

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

这就是 JSizes 使用的。

请注意， parseInt 可以返回 NaN（然后反过来使基于该变量的计算失败） - 之后添加 isNaN 检查！实施例的情况下：parseInt('auto', 10);（auto是有效的margin-left）。
2021-04-17 00:08:30
感谢这一点，我讨厌必须为微小的功能包含插件。
2021-04-22 00:08:30
@sethAlexanderBird 您正确地指出基数将默认为 10，但是，如果代码 linting 对您很重要（并且可能应该如此），那么 jsLint 和 jsHint 会在您忽略它时对您大吼大叫。
2021-04-28 00:08:30
您甚至不需要传递“基数”，因为它默认为 10。
2021-05-01 00:08:30

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

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

以下是获取周围尺寸的方法：

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 互联网
2021-04-28 00:08:30
这是最好的解决方案，因为它也适用于IE 7. 请参阅：stackoverflow.com/questions/590602/...
2021-05-03 00:08:30
其它你可能感兴趣的问题
上一篇客户端表单验证和交互的最佳 JavaScript 解决方案？ 下一篇AngularJS 指令：更改未反映在 UI 中的 $scope