1

DOM にテキストを含む div を動的に挿入するスクリプトがあります。テキストの内容は事前にわかりません。

このdivの幅を知りたいのですが、document.defaultView.getComputedStyle(node, "").getPropertyValue("width")or node.offsetWidth の戻り値が信用できないようです。

setInterval を使用してログに記録しましたが、値は時間の経過とともに変化します。たとえば、私の場合は 929px で始まり、908px に変わります。

この div は絶対位置にあり、空白の nowrap があるため、他の dom 要素によって「プッシュ」されたり、挿入されると何らかの形で変更されたりするとは思いません。

幅を取得するエレガントな方法はありますか、または戻り値が安定したら、醜い setTimeout を使用して取得する必要がありますか?

4

4 に答える 4

1

スクロールバーにより、ビューポートのサイズが変更される場合があります。スクロールバーが表示されると、その幅はドキュメントで使用できなくなります。overflow: scroll要素にまたはoverflow-y:scrollを追加してサイズを測定する前に、スクロールバーを強制的に存在させ<html>ます。

ブロックレベルの要素のサイズは、デフォルトでは、コンテナーの幅からマージンとパディングを引いたもの (編集されている場合でもposition)absoluteであり、途中で固定幅を設定しない限り、最終的にはこれが wiewport の幅になります。

于 2012-10-18T15:34:02.070 に答える
1

試す：

yourDOMElement.getClientBoundingRect()

これは、上、左、右、下、高さ、および幅の属性を持つオブジェクトを返します。これはクロスブラウザである必要があります。

注: 返された の位置属性 (上、左、右、下、高さ) を操作する場合は、必要に応じてスクロール オフセットを考慮してください。

更新: width/height 属性を持たない古いブラウザーでこれが機能することを確認するには、左/上から右/下を引いて計算します。

于 2012-10-18T15:29:42.600 に答える
0

jQuery を使用すると、次のことができるはずです。

var width = $("div-selector").width();
于 2012-10-18T15:29:14.293 に答える
-2

これはかなり簡単ですか？

ブラウザーでページを開き、f12 を押します。Firefoxでは上部に「要素を検査」ボタンがあり、クロムでは下部にあります。それをクリックして、マウスをその上に置きます。これにより、高さと幅が px で表示されます。私にとって間違ったことはありません。

それでも表示されない場合は、クリックすると、コンソールの CSS パネルに表示されます。

于 2012-10-18T15:26:19.777 に答える