以像素为单位的填充或边距值使用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'并将其转换为整数:

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

这个简单的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快。

http://jsperf.com/number-vs-plus-vs-toint-vs-tofloat/20

不要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!