使用jQuery以像素为整数填充或边距值

小开

你应该能够使用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"))

小开

你可以像任意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 that = $("#myId");
alert(that.outerHeight(true) - that.innerHeight());

小开

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

外汇。

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

小开

好，我来回答刚才的问题

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

var padding = 方法($ (" myId ") . css (padding-top) .replace (" ems ", " ")); < / p >

如果你已经定义了另一个测量值，如px，只需将“ems”替换为“px”。 parseInt将stringpart解释为错误的值，因此重要的是将其替换为…没有。< / p >

小开

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

这就是JSizes所使用的。

小开

这个简单的函数可以做到:

$.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();

注意，每个变量，例如paddingTopBottom，包含元素两边边距的和;例如,paddingTopBottom == paddingTop + paddingBottom。我想知道有没有办法把它们分开。当然，如果它们相等，你可以除以2:)

小开

我可能使用github.com/bramstein/jsizes jquery插件填充和边缘在非常舒适的方式，谢谢…

小开

解析int

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

0px返回0

小开

无耻地采用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

小开

不是死灵，但我做了这个，可以确定基于各种值的像素:

$.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;
}
});

这样，我们会考虑到大小和自动/继承。

小开

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

jQuery的.css()将%'s和em's转换为它们开始时的等效像素，而parseInt()将从返回字符串的末尾删除'px'并将其转换为整数:

http://jsfiddle.net/BXnXJ/ < a href = " 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>'));
});

小开

不要使用字符串。替换(“px”、" "));

使用parseInt或parseFloat!