JSによって可視要素のサイズを取得するのは非常に便利です。この方法を直接使用できます。
コードコピーは次のとおりです。
関数getDefaultStyle（OBJ、属性）{// IEおよびDOMと互換性のある最終スタイル関数を返し、パラメーターを設定します：要素オブジェクト、スタイル特性
obj.currentstyle？obj.currentstyle [属性]：document.defaultview.getComputedStyle（obj、false）[属性];
}
しかし、この要素が隠されており（表示：なし）、そのサイズが適応性が不明な場合、上記の方法は機能しません！ディスプレイ：なし要素は物理的なサイズがありません！悲劇はこのように起こりました！
幸いなことに、可視性もあります。CSSに隠されていますが、これは見えません。それとディスプレイの最大の違いは、その視界：隠されたものは物理的なサイズを持っています。物理的なサイズがある場合は、上記の方法でサイズを取得できますが、表示を変更した後：視界になし：非表示に、ページに空白があります。可視性を変更しても：表示するために隠されています：サイズを取得した直後に、ページの部分はまだ揺れます。次に、最良の方法は、この隠された要素を画面からまたはドキュメントストリーム（位置：絶対）から移動することです。これは完璧なようですが、悲劇は再び起こります。この要素をもう一度表示したい場合、要素は目に見えず、位置は正しくありません。したがって、サイズを取得した後、スタイルを復元する必要があります。これは、位置と可視性の属性を元のスタイルに戻すことです。
これは、非表示の要素のサイズを取得するためのJSの基本的な実装です。興味がある場合は、本「javascriptに専門的」の方法を見ることができます。
ここでも簡単なデモを作成しました。ソースコードを確認できます。
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> jsは、非表示の要素のサイズを取得します</title>
<style type = "text/css">
</style>
<script type = "text/javascript" src = "http://www.css88.com/tool/css3preview/jquery-1.4.2.min.js"> </scrip>
</head>
<body>
<div id = "test_display_block" style = "display：none; border：10px solid #cdcdcd; margin-left：100px">これはテストコンテナです<br />これはテストコンテナです。これは目に見えるコンテナです<br />これはテストコンテナです。テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、コンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、試験容器、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テスト容器、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、テストコンテナ、
<div id = "test_display_none" style = "display：none; border：10px solid #cdcdcd">これはテストコンテナです。これはテストコンテナです。
<div id = "test_display_click">私をクリック</div>
<script type = "text/javascript">
//オブジェクトタイプを判断します
関数getType（o）{
var _t;
return（（_t = typeof（o））== "object"？o == null && "null" || object.prototype.tostring.call（o）.slice（8、-1）：_ t）.tolowercase（）;
}
//要素スタイルを取得します
関数getStyle（el、stylename）{
El.Style [Stylename]を返しますか？ El.Style [Stylename]：El.CurrentStyle？ El.CurrentStyle [Stylename]：window.getComputedStyle（el、null）[stylename];
}
関数getStylenum（EL、stylename）{
return parseint（getStyle（el、stylename）.replace（/px | pt | em/ig、 ''））;
}
関数setStyle（el、obj）{
if（getType（obj）== "object"）{
for（s in obj）{
var cssarrrt = s.split（ " - "）;
for（var i = 1; i <cssarrrt.length; i ++）{
cssarrrt [i] = cssarrrt [i] .replace（cssarrrt [i] .charat（0）、cssarrrt [i] .charat（0）.touppercase（））;
}
var cssartnew = cssarrrt.join（ ""）;
el.style [cssartnew] = obj [s];
}
}
それ以外
if（getType（obj）== "string"）{
el.style.csstext = obj;
}
}
関数Getsize（el）{
if（getStyle（el、 "display"）！= "none"）{
return {width：el.offsetwidth || getStylenum（el、 "width"）、height：el.offseetheight || getStylenum（el、 "height"）};
}
var _addcss = {display： ""、position： "absolute"、visibility： 'hidden'};
var _oldcss = {};
for（i in _addcss）{
_oldcss [i] = getStyle（el、i）;
}
setStyle（el、_addcss）;
var _width = el.clientwidth || getStylenum（el、 "width"）;
var _height = el.clientheight || GetStylenum（El、 "height"）;
for（i in _oldcss）{
setStyle（el、_oldcss）;
}
return {width：_width、height：_height};
}
var dd = document.getElementById（ "test_display_block"）;
アラート（getSize（dd）.height）;
document.getElementById（ "test_display_click"）。onclick = function（）{
dd.style.display = "block";
document.getElementById（ "test_display_none"）。style.display = "block";
}
alert（$（ "＃test_display_none"）。height（））;
</script>
</body>
</html>
オフトピック：一般的に、JavaScriptフレームワークとライブラリがこの方法をカプセル化しました。たとえば、JQでは、height（）およびwidth（）メソッドを使用して、非表示の要素のサイズを取得できます。