JSがインターネット上で隠された要素の幅と高さを取得する方法はいくつかありますが、取得できない状況がいくつかあるかもしれません。
例えば：
<！doctype html> <html lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title>テスト>すべての川と海は川と海に注がれ、世界の人々に与えられます。 </div> <div id = "test2" style = "display：none"> <div style = "display：none"> <div id = "test2_child">ほこりを慰めるのに十分なワインのポットがあります。すべての川と海は川と海に注がれ、世界の人々に与えられます。 </div> </div> </div> <div id = "test3"> <div> <div id = "test3_child">ほこりを慰めるのに十分なワインのポットがあります。すべての川と海は川と海に注がれ、世界の人々に与えられます。 </div> </div> </div> </div> </body> </html>
テストを取得できますが、test2_childは取得できません。この状況を考慮して、私はそれを自分で解決する方法を書きました。
解決：
1.要素（幅と高さを取り、すべての隠された祖先要素を自分自身を含む身体要素まで取得します。
2。すべての非表示の要素の表示と可視性の特性を取得し、それらを保存します。
3.すべての非表示の要素を可視性に設定します：非表示;ディスプレイ：ブロック！重要。 （重要な理由は、優先度が不十分であることを避けることです）。
4.要素の幅と高さを取得します（幅と高さを取ります）。
5.すべての隠された要素のスタイルの表示と視認性の特性を復元します。
6.要素の幅と高さの値を返します。
コード実装：
function getsize（id）{var width、height、elem = document.getelementbyid（id）、noneNodes = []、nodestyle = []; GetNoneNode（Elem）; //マルチ層ディスプレイの要素を取得：なし; setNodestyle（）; width = elem.clientwidth; height = elem.clientheight; Resumenodestyle（）; return {width：width、height：height}関数getNoneNode（node）{var display = getStyles（node）.getPropertyValue（ 'display'）、tagname = node.nodename.tolowercase（）; if（display！= 'none' && tagname！= 'body'）{getNoneNode（node.parentnode）; } else {noneNodes.push（node）; if（tagname！= 'body'）getNoneNode（node.parentnode）; }} //このメソッドは、最終的な表示プロパティ設定があるかどうかを取得でき、style.displayにすることはできません。関数getStyles（ELEM）{//サポート：IE <= 11+、Firefox <= 30+（＃15098、＃14150）//ポップアップで作成された要素のスロー// ff defayview.getComputedStyle "var view = elem.ownerdocument.defaultview; if（！view ||！view.opener）{view = window; } return View.getComputedStyle（ELEM）; };関数setNodestyle（）{var i = 0; for（; i <noneNodes.length; i ++）{var visibility = noneNodes [i] .style.visibility、display = noneNodes [i] .style.display、style = noneNodes [i] .getattribute（ "style"）; //他のディスプレイスタイルを上書きしない[i] .setattribute（ "style"、 "visibility：hisdibility：display：block！fality;" + style）; nodestyle [i] = {visibility：visibility、display：display}}} function resumenodestyle（）{var i = 0; for（; i <noneNodes.length; i ++）{noneNodes [i] .style.visibility = nodestyle [i] .visibility;非eNodes [i] .style.display = nodestyle [i] .display; }}}デモの例：
var testsize = getsize（ 'test'）; console.log（ "test-> width：" + testsize.width + "height：" + testsize.height）; var test2childsize2 = getsize（ 'test2_child'）; console.log（ "test2child2-> width：" + test2childsize2.width + " +" + " test2childsize2.height）; var test3childsize = getsize（ 'test3_child'）; console.log（ "test3_child-> width：" + test3childsize.width + "heigh：" + test3childsize.height）; //印刷値は次のとおりですテスト - >幅：417高さ：18test2child2-> width：417 height：18test3_child-> width：417 height：18
注：
1.すべての隠された祖先要素を表示し、要素の幅と高さの値を取得します。場合によっては、値を取得することは間違っている可能性があります。
PS：しかし、これについて心配する必要はありません。何かが本当にうまくいかないときは、方法をハッキングしてください。
2。隠された先祖の要素が表示され、視認性の属性が表示される理由は、それ自体に影響を与えることなく後退することです。
3。さらに、getStylesメソッドはjQueryソースコードから抽出されるため、このメソッドは最終的な表示属性設定があるかどうかを取得できます。
PS：style.displayから取得できません。
JSで隠された要素を取得する上記の方法は、エディターが共有するすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。