Question

jQuery有height（）和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＆＃39; .css()将％＆＃39}转换为等同于开头的像素，parseInt()将从'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>')); });返回字符串的结尾并将其转换为整数：

http://jsfiddle.net/BXnXJ/

{{1}}

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

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

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

用法：

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

Answer 7

Parse int

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

为0px

返回0

Answer 8

你可以像any CSS attribute一样抓住它们：

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 9

好的，只是回答原来的问题：

你可以将填充作为一个可用的整数，如下所示：

var padding = parseInt函数（$（ “MYID”）的CSS（ “填充顶”）替换（ “EMS”， “”））;

如果您定义了另一个测量，例如px，则将“ems”替换为“px”。 parseInt将stringpart解释为错误的值，因此将其替换为“nothing”非常重要。

Answer 10

您还可以使用以下内容扩展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

Answer 11

不要使用string.replace（＆＃34; px＆＃34;，＆＃34;＆＃34;））;

使用parseInt或parseFloat！

Answer 12

我可能会以非常舒适的方式使用github.com/bramstein/jsizes jquery插件来填充和填充页面，谢谢......

Answer 13

从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

Answer 14

不是坏死但我做了这个可以根据各种值确定像素：

$.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将填充或边距值（以像素为单位）整数

14 个答案: