jQueryを使用した整数としてのピクセル単位のパディングまたはマージン値

jQueryには、高さまたは幅をピクセル単位で整数として返すheight（）en width（）関数があります...

jQueryを使用して要素のパディングまたはマージン値をピクセル単位および整数として取得するにはどうすればよいですか？

私の最初のアイデアは次のことをすることでした：

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

しかし、たとえばemsでパディングが指定されている場合、値をピクセルで取得するにはどうすればよいですか？

Chris Pebbleによって提案されたJSizesプラグインを調べたところ、自分のバージョンが正しいバージョンであることがわかりました:)。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"))

外側と内側の高さ/幅を比較して、合計マージンとパディングを取得します。

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

parseInt関数には、変換で使用される数値システムを定義する「基数」パラメーターがあるため、呼び出すとparseInt(jQuery('#something').css('margin-left'), 10);左マージンが整数として返されます。

これはJSizesが使用するものです。

すでにネイティブで利用可能なものを実行するためだけに、別のライブラリをロードしないでください。

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

周囲の寸法を取得する方法は次のとおりです。

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で割ります。

この単純な関数はそれを行います：

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

使用法：

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

intを解析

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

0pxに対して0を返します

すべてのCSS属性と同じように、それらを取得できます。

alert($("#mybox").css("padding-right"));
alert($("#mybox").css("margin-bottom"));

cssメソッドの2番目の属性でそれらを設定できます。

$("#mybox").css("padding-right", "20px");

編集：ピクセル値だけが必要な場合は、次を使用しますparseInt(val, 10)：

parseInt($("#mybox").css("padding-right", "20px"), 10);

元の質問に答えるだけでOK：

次のような使用可能な整数としてパディングを取得できます。

var padding = parseInt（$（ "myId"）。css（ "padding-top"）。replace（ "ems"、 ""））;

pxのような別の測定を定義している場合は、「ems」を「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
}};

それにより、offset関数のようなコレクションを返すmargin（）という関数をjqueryオブジェクトに追加します。

fx。

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

string.replace（ "px"、 ""））;は使用しないでください。

parseIntまたはparseFloatを使用してください！

私はおそらく非常に快適な方法でパディングとマージンに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

ネクロではなく、さまざまな値に基づいてピクセルを決定できるようにしました。

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

このようにして、サイジングと自動/継承を考慮します。