親要素が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を設定していないので表示される
