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

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

我的第一个想法是:

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

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


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

感谢Chris Pebble和Ian Robinson


当前回答

好,我来回答刚才的问题

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

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

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

其他回答

好,我来回答刚才的问题

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

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

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

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

这就是JSizes所使用的。

你也可以自己扩展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函数的集合。

fx.

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

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

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

请不要仅仅为了做一些本地已经可用的东西而去加载另一个库!

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