0

要素をDOMに追加してすぐに削除した場合、要素は一瞬でも表示されますか?

var feed    = $('<div class="entry"></div>').text(data.status).appendTo(app.twitter_feed);

console.log(feed.height());

feed.remove();

いくつかのブラウザーで上記のコードを試しましたが、要素が表示されませんでした。しかし、この動作はすべてのプラットフォーム/ブラウザーで一貫していますか?

4

5 に答える 5

2

以前の質問も読んだ後、実際に要素を表示する前に、要素の表示高さを計算したいようです。なぜこれを行う必要があるのか​​ は完全にはわかりませんが（悪臭を放ちます）、とにかく方法は次のとおりです.

、、および要素の希望の幅¹ を使用<div>してページにaを配置します。その外側のヘルパー div 内に話している を追加し(何があっても表示されません)、ブラウザーがレイアウトを実行した後にその高さを取得します。その後、必要に応じて処理を進めることができます (たとえば、内側を DOM ツリーの別の位置に移動するなど)。height: 0overflow: hidden<div><div>

¹ を終了させたい場所に正確に配置するのが最善です.entry(つまり、.entryとヘルパー div は兄弟になります)。

PS:本当の目的について言及することは、誰にとっても常に良いことです。

于 2012-06-22T07:28:10.637 に答える
0

ブラウザーが要素の有効な高さを計算できるようにするには、ウィンドウにレンダリングするか、少なくとも現在のサイト レイアウトに対して要素のボックスをリフローさせる必要がある状況を想像できます。表示されない場合があります (そうです、すぐに削除されます) が、このような状況ではページがリフローし、ページ上の影響を受ける要素の動きを見ることができます。

たとえば、画像が頭に浮かぶのは、ブラウザは通常、画像をレイアウトしようとするまで画像の寸法がわからないためです (ただし、間違っている場合は修正してください)。

いいえ、これが一貫した動作であるとは言えません。

于 2012-06-22T07:24:20.443 に答える
0

このように実装します。app.twitter_feed のクローンを作成し、それを地獄 (座標: x:-30000, y:-30000) に送信して、そこで好きなことを試してみてください。

var cloneTWFeed = $(app.twitter_feed).clone();
cloneTWFeed.css("position", "absolute").css("top","-30000").css("left","-30000");
var feed = $('<div class="entry"></div>').text(data.status).appendTo(cloneTWFeed);
console.log(feed.height());
feed.remove();
于 2012-06-22T07:27:38.010 に答える
0

現在のコードは問題なく動作しますが、要素を追加した直後に削除するため、要素を表示することはできません。

ブラウザは、追加された直後に削除するまでにそれを認識します。

この実用的なフィドルの例を参照してください!

そこで、console.log を alert() に置き換えて、ブラウザーが応答を待機するように強制し、ページ上の要素を表示できるようにしました。

注:高さが 18 ピクセルの場合、console.log() でも問題なく動作します。

remove() をタイマーでラップして実際に要素を (視覚的に) 表示するか、HTML マークアップが強すぎる場合、または目的の効果が要素からのみデータを収集することである場合は、要素を非表示の要素の中に配置します。そうすれば、データの収集が終わったらいつでも削除できます。

于 2012-06-22T07:35:01.940 に答える
-1

達成しなければならないのが高さの測定である場合は、可視性のない要素を追加してみてください (CSS を参照してください: http://reference.sitepoint.com/css/visibility )

要素の流れに問題のないページのゾーン。

于 2012-06-22T07:24:23.627 に答える