23

みんなに聞いてきましたが、.css(‘width’)and.css(‘height’)ではなく.width()andを使用する利点を誰も教えてくれません.height()。

どちらもオフセット ディメンションを返すことを知っています。オフセット ディメンションは、要素の内部コンテンツによってどれだけ引き伸ばされても、要素の実際のディメンションです。

css()ウィンドウとドキュメントのサイズを返すために使用していたように、できることとできないことがいくつかあると思います.FFはこれを行うのに問題はありませんでしたが、IEは私にエラーを返しました. したがって、一部のブラウザで動作する可能性があると推測していますが、他のブラウザでも動作する可能性があります。では、100% のクロス ブラウザー互換性のために、または特定の場合にのみ、両方を一緒に使用する必要がありますか?

4

10 に答える 10

16

.height()ドキュメントから-

.css('height') と .height() の違いは、後者は単位のないピクセル値 (たとえば 400)を返すのに対し、前者は単位をそのままの値 (たとえば 400px) を返すことです。.height() メソッドは、要素の高さを数学的計算で使用する必要がある場合に推奨されます。

計算で高さを使用する必要がある場合は、 で値を取得します.height()。

于 2012-11-07T22:45:44.047 に答える
10

みんなに聞いてきましたが、.width() と .height() ではなく .css('width') と .css('height') を使用する利点を誰も教えてくれません。

CSS をクエリすると、適用された値が、5pxまたは1emそれに割り当てられたサイズとして与えられます。

jQuery を使用すると、次のメソッドを使用できます。

  • .height(要素の高さ、パディング、マージン、ボーダーなし)
  • .innerHeight(要素の高さ + パディング)
  • .outerHeight(要素の高さ + パディングとボーダー)
  • .outerHeight(true)(要素の高さ + パディング + ボーダー + マージン)
  • .width(要素の幅、パディング、マージン、ボーダーなし)
  • .innerWidth(要素の幅 + パディング)
  • .outerWidth(要素の幅 + パディングとボーダー)
  • .outerWidth(true)(要素の幅 + パディング + ボーダー + マージン)

これらのメソッドはすべて、高さ/幅の単位をピクセルで表す数値のみを返します。

jQuery を使用する利点は、ブラウザー全体で、マージン、パディング、または境界線を無視/含めることができるため、正確な幅/高さをより詳細に制御できることです。

さらに、これらのメソッドは常に単位を単純な数値として返すため、測定自体について心配する必要がないため、前述のようにpx、em、 などを使用して計算する方が簡単です。

DEMO - 高さの方法のデモンストレーション (幅にも同じことが適用されます)

上記のデモでは、div を使用しています。

<div id="myDiv">My Div</div>

次の CSS を使用します。

div{
    border: 1px solid blue;
    padding: 5px;
    margin: 10px;
}

このスクリプトの使用:

var $div = $("#myDiv");
var height = $div.height();
var heightWithPadding = $div.innerHeight();
var heightWithPaddingAndBorder = $div.outerHeight();
var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);

var $result = $("#result");
$result.append("height: " + height);
$result.append("<br />height with padding: " + heightWithPadding);
$result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
$result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);

その結果、次のようになります。

height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52
于 2012-11-07T23:05:41.423 に答える
7 
var elH = someElement.height();           // 200

.height()数値を返しますが、

var elH = someElement.css("height");      // "200px"

上記のjQueryは、styleJSのように要素のプロパティにアクセスします。

var height = someDOMelement.style.height; // "200px"

で文字列値を返しますpx。

于 2012-11-07T22:55:04.717 に答える
1

私がこの回答を提供したのは、質問があなたができることとできないこと、およびその逆について尋ねていたからcss()ですwidth()。ページ要素が隠されている興味深いケースがあります。

最近、ページが読み込まれたときに非表示になったり、非表示になったりする要素を動的に移動する必要がある状況がありました。要素が隠されていなければ、要素の実際の幅を使用して新しい DOM 構造を作成するのは簡単でした。しかし、要素が隠されている場合は、 を使用し.width() returned 0ます。そのため、要素クラスに CSS 幅情報を追加する必要があり、そこから次のようなステートメントを作成できました。

var width = $('#element').width() == 0 ? parseInt($('#element').css('width')) : $('#element').width();

これにより、使用可能な幅を使用していることを確認できるだけでなく、要素が非表示の場合のフォールバック値も提供することができました。

これにより、これら 2 つの方法でできることの違いが理解できるようになることを願っています。

于 2012-11-07T23:58:22.393 に答える
0

".height() は、CSS の box-sizing プロパティの値に関係なく、常にコンテンツの高さを返します。jQuery 1.8 の時点では、CSS の高さと box-sizing プロパティを取得し、潜在的な境界線とパディングを差し引く必要がある場合があります。要素に box-sizing: border-box がある場合の各要素。このペナルティを回避するには、.height() ではなく .css( "height" ) を使用します。

http://api.jquery.com/height/

于 2015-09-21T15:10:33.890 に答える
0

.width は単位のない値を返します。.css("width") は css 値を返すため、幅は数学的な計算で使用する必要があります。

http://api.jquery.com/width/

于 2012-11-07T22:46:20.747 に答える
0

うん！
主なことは、ほとんどの人が言ったように、「.height() は単位のないピクセル値を返す」ということです。

しかし、疑問は残ります: なぜそうなのか...?... なぜこのように考えられたのでしょうか?


@Jay Blanchard は次のように述べています。「要素の高さを数学計算で使用する必要がある場合は、.height() メソッドをお勧めし

ます。」 ブラウザーの反応 - レスポンシブ ウィンドウ/div の再ディメンション プロセスで要素の配置を計算/反応するのに非常に便利です。width() / height()を 使用して、hide()/show() 内部レイヤーなどのJQuery効果の結果を計算します (ご存じのように、CSS には影響しません)。たとえば、CSS プロパティには、パディング、ボーダー、またはマージンが含まれていない ことにも注意してください(

height
height内側のX /外側のX CSS ディム)。したがって、これらを計算する必要があります。jQuery: Get height of hidden element in jQuery を

見てください。

于 2014-03-21T13:22:22.770 に答える