LANG SELRCT

コードを書く場所についてはこちら

2018年4月2日月曜日

要素の表示判定でoffsetTopを試してみる


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