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

Question

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

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

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

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

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

---

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

感谢Chris Pebble和Ian Robinson

Answer 1

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

Answer 2

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

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

Answer 3

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

这是JSizes使用的.

Answer 4

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

jQuery .css()将%和em转换为等效于开头的像素,并将从返回的字符串的末尾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>'));
});

Answer 5

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

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

Answer 6

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

Answer 7

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

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

用法:

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

Answer 8

解析int

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

为0px返回0