Element.clientTop - 表示域の上側の幅を取得する

<p><pre><code>.box { border: 20px black solid ; } </code></pre></p> <p id="target" class="box">class="box"</p> <p id="output" class="output"></p> <p id="error" class="error none"></p> <p><button id="fire" class="button">実行</button></p> <p><button id="reset" class="button">リセット</button></p>

.output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px solid #333 ; min-height: 24px ; } .box { width: 200px ; height: 100px ; padding: 20px ; border: 20px solid #000 ; margin: 0 auto ; } .error { color: #f00 ; padding: 8px 12px ; border: 1px solid #333 ; min-height: 24px ; } .button { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-size: 1rem ; font-weight: 700 ; border: 1px solid #e6e6e6 ; width: 100% ; box-sizing: border-box ; } .button:hover { cursor: pointer ; background: #e6e6e6 ; } .none { display: none ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳ Ｐゴシック","Osaka" ; }

// 実行 document.getElementById( "fire" ).addEventListener( "click", function() { try { // 要素を取得 ( → <p id="target">SYNCER</p> ) var pElement = document.getElementById( "target" ) ; // clientTopを取得 var clientTop = pElement.clientTop ; // 取得した結果を出力 document.getElementById( "output" ).textContent = clientTop ; // コンソールで内容を出力 console.log( clientTop ) ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // リセット document.getElementById( "reset" ).addEventListener( "click", function() { initialize() ; } ) ; // エラー表示用の要素 var errorElement = document.getElementById( "error" ) ; // 初期化 function initialize() { errorElement.className = "error none" ; document.getElementById( "output" ).textContent = "" ; }