親要素がdisplay: noneの子要素が
画面に表示されているかどうかを知りたくて試したコードです
表示されていない場合は 0 が返ってくるので
非表示の判定に利用できそう
コード.gs
function doGet() { return HtmlService.createHtmlOutputFromFile("index"); } |
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html> <html> <head> <style> .display_none { display: none; } </style> </head> <body> <span class="display_none"> <textarea id="ta">hello</textarea> </span> <span> <textarea id="ta2">world</textarea> </span> <script> var ta = document.getElementById("ta"); var ta2 = document.getElementById("ta2"); alert(ta.offsetTop) alert(ta2.offsetTop) </script> </body> </html> |
意訳display_noneのスタイル 非表示にする 非表示のspan テキストエリア span テキストエリア idがtaの要素を取得する idがta2の要素を取得する 上部からのtaの距離をアラート 上部からのta2の距離をアラート |
実行結果
表示されていないtaのoffsetTop
表示されているta2のoffsetTop
ta2にはdisplay_noneを設定していないので表示される