使用jQuery将填充或边距值(以像素为单位)整数

jQuery有height()en width()函数,以像素为单位返回高度或宽度...

如何使用jQuery 获取元素的填充或边距值(以像素为单位)和整数？

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

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

但是,如果在ems中给出填充,例如,我如何获得以像素为单位的值？

---

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

感谢Chris Pebble和Ian Robinson

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

---

在chrome http://jsperf.com/replace-vs-parseint上,parseInt比替换('px','')快49%

---

@ ingredient_15939 - 试过了,是的; 它计算实际的像素值并用px返回.边框宽度相同.老问题我知道,但由于没有人回答你的问题,我认为我会帮助其他后来者......

---

如果填充/边距在CSS中表示为em或pt,那么`.css()`仍会返回带有"px"的值吗？

---

仅供参考:jQuery确实添加了'px',因此Ian的解决方案有效,并且在传递给parseInt()时也会返回一个整数 - 并且它不需要插件:`parseInt($('a').css(' margin-top').replace('px',''))`

---

我没有检查jQuery方法是否实际返回"px"后缀,但是来自另一个答案(我最终使用的)的`JSizes`插件在返回值传递给`ParseInt(.)时返回一个整数. ..)`,仅供参考.

---

我相信jQuery会添加"px",因此我们应该能够可靠地预期其存在并将其删除 - 请参阅上面的编辑.

2> svinto..：

---

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

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

---

请记住,outerWidth/Height也包括边框宽度

---

innertWidth/innerHeight在计算中也包含填充,为了获得没有填充的宽度/高度,你需要使用.width()和.height().http://api.jquery.com/innerWidth/ http://api.jquery.com/width/ http://api.jquery.com/outerWidth/

---

`that.outerHeight(true) - that.outerHeight()`会给出总的垂直边距,因为outerHeight()会包含填充和边框但不包括边距.参见[api.jquery.com/outerWidth/](http://api.jquery.com/outerWidth/).

3> guigouz..：

---

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

这是JSizes使用的.

---

请注意,parseInt可以返回NaN(然后根据该变量进行计算失败) - 之后添加一个isNaN检查!示例案例:`parseInt('auto',10);`(`auto`是有效的`margin-left`).

---

多亏了这一点,我讨厌必须包含用于微小功能的插件.

---

您甚至不需要传递“基数”，因为它的默认值为10。

4> RavenHursT..：

---

请不要加载另一个库只是为了做一些本机可用的东西!

jQuery .css()将%和em转换为等效于开头的像素,并将从返回的字符串的末尾parseInt()删除'px'并将其转换为整数:

http://jsfiddle.net/BXnXJ/

$(document).ready(function () {
    var $h1 = $('h1');
    console.log($h1);
    $h1.after($('
Padding-top: ' + parseInt($h1.css('padding-top')) + '
'));
    $h1.after($('
Margin-top: ' + parseInt($h1.css('margin-top')) + '
'));
});

5> FireAphis..：

---

以下是如何获得周围尺寸的方法:

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

6> Robert Grant..：

---

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

7> mpen..：

---

这个简单的功能可以做到:

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

用法:

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

---

@Mark http://jsfiddle.net/BNQ6S/ IE7:`NaN`,这取决于浏览器.据我所知,jQuery不规范化`.css()`与`.width()`&`.height()不同.

---

不考虑`auto`,`inherit`和`%`值

---

@Thomas:不对.http://jsfiddle.net/nXyFN/ jQuery似乎总是以像素为单位返回结果.

8> a53-416..：

---

解析int

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

为0px返回0