LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

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


最新の投稿

選択したテキストを配列に入れてテキストエリアに出力したい

今回やりたいこと アプリケーションの中で 選択したテキストを取得する。 選択したテキストを テキストエリアに入れる。 選択したテキストを 配列に追加していく。 STEP1 「テキストを」を選択するとテキストエリアに「テキストを」が入る。 STEP2 その後、「追加して」を選択する...