以像素为单位的填充或边距值使用jQuery
jQuery有height（）和width（）函数，以像素为整数返回高度或宽度…
我怎样才能得到一个元素的填充或边距值像素和整数使用jQuery？
我的第一个想法是做到以下几点：
var padding = parseInt(jQuery("myId").css("padding-top")); 但是，如果在ems中给出了填充，我怎样才能得到像素值？
看着由Chris Pebblebuild议的JSizes插件，我意识到我自己的版本是正确的:)。 jQuery的返回值总是以像素为单位，所以只需将其parsing为整数即可。
感谢Chris Pebble和Ian Robinson
你应该可以使用CSS（ http://docs.jquery.com/CSS/css#name ）。 您可能需要更具体一些，比如“填充左”或“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"))
比较外部和内部高度/宽度以获得总边距和填充：
var that = $("#myId"); alert(that.outerHeight(true) - that.innerHeight());
parseInt函数有一个“radix”参数，它定义了在转换中使用的数字系统，所以调用parseInt(jQuery('#something').css('margin-left'), 10); 以整数forms返回左边距。
这是JSizes使用的。
请不要去加载另一个库，只是为了做一些已经本地可用的东西！
jQuery的.css()将％和em转换为它们的像素等同于开始， parseInt()将从返回的string的末尾移除'px'并将其转换为整数：
$(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>')); });
这个简单的function将做到这一点：
$.fn.pixels = function(property) { return parseInt(this.css(property).slice(0,-2)); };
用法：
var padding = $('#myId').pixels('paddingTop');
以下是如何获得周围的尺寸：
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();
请注意，例如，每个variablespaddingTopBottom包含元素两边的边距之和; 即， paddingTopBottom == paddingTop + paddingBottom 。 我想知道是否有办法让他们分开。 当然，如果他们是平等的，你可以除以2 🙂
parsingint
parseInt(canvas.css("margin-left"));
为0px返回0
你可以像任何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);
好的只是为了回答原来的问题：
你可以得到这样的填充作为一个可用的整数：
var padding = parseInt（$（“myId”）.css（“padding-top”）。replace（“ems”，“”））;
如果你已经定义了像px这样的另一个测量，只需将“ems”replace为“px”即可。 parseInt将stringpart解释为一个错误的值，所以它的重要性在于用…取代它。
你也可以用下面的东西来扩展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
我可能使用非常舒适的方式github.com/bramstein/jsizes jquery插件的填充和边距，谢谢…
从Quickredfox无耻地采用。
jQuersy.fn.cssNum = function(){ return parseInt(jQuery.fn.css.apply(this, arguments), 10); };
更新
改成parseInt(val, 10)因为它比parseFloat快。
不要necro，但我做了这可以确定基于各种值的像素：
$.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; } });
这样，我们考虑了大小和自动/inheritance。
不要使用string.replace（“px”，“”））;
使用parseInt或parseFloat！
