1

CSSを使用してHTMLページの要素を変更し、すぐにその視覚的プロパティを読み取ろうとしています。ただし、CSSで適用されるスタイルは、後で（次の「フレーム」）まで適用されません。

CSS：

.node {
    width: 10px;
}

JavaScript：

// Create element
var element = document.createElement("div");
element.className = "node";
document.body.appendChild(element);

console.log(element.clientWidth);

log上記の呼び出しの出力はである必要がありますが10、NaNすぐに呼び出された場合です（ただし10、フレームの後のように正しく読み取られます）。

を使用getComputedStyle()すると、同様の結果が得られます。

var style = getComputedStyle(element);
console.log(element.style);

出力は最初の実行では「」ですが、最初のフレームの後で「10px」（正しく）です。

プロパティを読み取れるようになるまで、ブラウザの再レイアウトを1回待つ必要があると想定しています。ブラウザにその要素の寸法を計算させる方法はありますか？あるいは、それは悪い習慣かもしれません。CSSのwidthプロパティを読み取る簡単な方法はありますか？

言い換えれば、ここでのベストプラクティスは何ですか？

注：ここでは、jQueryやその他のライブラリの使用を避けようとしています。

4

3 に答える 3

2

computedStyle代わりに にアクセスしてみてください。

var computedStyle = document.defaultView ? document.defaultView.getComputedStyle(element, null) : element.currentStyle;

そして読む

console.log( computedStyle.width);

例: http://jsfiddle.net/mGCT5/1/

于 2012-07-12T14:10:49.737 に答える
1

変更されたプロパティの影響を判断する (したがって、変更された値を読み取る) 前に、ブラウザーはリフローを実行する必要があると言っているのは正しいです。ご存じのとおり、JavaScript はブラウザの内部イベント ループによって実行されます。現在のイベントの JS コードが完全に実行されるまで、リフローは実行されません。

問題を解決するには、 を使用できますsetImmediate()。これにより、できるだけ早く処理される新しいイベントをキューに入れることができます。基本的に「譲歩」し、リフローが発生するのを許可し、ジャンプして残りのコードを終了します。

var element = document.createElement("div");
element.className = "node";
document.appendChild(element);

setImmediate(function() {
    console.log(element.clientWidth);
});

現時点では、一般的なブラウザでサポートされているものはほとんどないことに注意してくださいsetImmediate。setTimeout回避策として、次の遅延を使用できます0。

setTimeout(function() {
    console.log(element.clientWidth);
}, 0);

以下は実際の例です: jsbin.com/ehigor

また、ブロックの後に配置しsetTimeoutたコードは、ブロック内のコードの前、現在の「フレーム」の終了前、つまりリフローの前に実行されることに注意してください。

アップデート：

jAndy の答えは正しいです。getComputedStyleOPの問題を解決します。この場合、CSS プロパティを設定どおりに読み取るだけなので、リフローは必要ありません。

getComputedStyleこれが必要な理由は、JavaScript でスタイル ルールが設定されていないためです。とは異なりelement.style、getComputedStyle外部 CSS ファイルで設定されたスタイル ルールとブラウザのデフォルト スタイル ルールも考慮されます。

スタイル ルールの値がスタイルの実際の最終的な値と直接相関しない場合など、十分でgetComputedStyleはなくリフローが必要な場合があります。最も注目すべきケースは、相対的な寸法と位置です。width(たとえば)に設定し、要素の幅をピクセル単位50%で読み取りたい場合は、ブラウザーにリフローを実行させることによってのみ、その値が何であるかを知ることができます (この場合は便利です)。一方、それが;に設定されていることを知りたい場合。使用してください。setTimeoutwidth"50%"getComputedStyle

于 2012-07-12T14:33:27.360 に答える
-1

setTimeout を使用して、幅を確認する前に 0.5 秒待機しますか?

于 2012-07-12T14:08:06.427 に答える