[デイリーリサーチ]テキストオブジェクトドキュメントのジオメトリプロパティ2

6789 ワード
JavaScript text テキストリンク
*この記事は、生活コードの授業を終えて復習のために書いたものです.

1. Viewport



ソース:https://opentutorials.org/course/1375/7112
👉 図に示すように、ビューポートは、ドキュメントの内容の中でユーザーに表示される領域を表します.したがって、ドキュメントの座標もあれば、ビューポートのルーラーもあります.上に見えるgetBoundingClientRectでは、ビューポートの座標を使用します.
<style>
    body{
        padding:0;
        margin:0;
    }
    div{
        border:50px solid #1065e6;
        padding:50px;
        margin:50px;
    }
    #target{
        width:100px;
        height:2000px;
    }
</style>
    <div>
        <div id="target">
            Coding
        </div>
    </div>
 
<script>
var t = document.getElementById('target');
setInterval(function(){
    console.log('getBoundingClientRect : ', t.getBoundingClientRect().top, 'pageYOffset:', window.pageYOffset);
}, 1000)
</script>
👉 ここから,getBoundingClinetRectの値はビュー領域の座標を用い,ビュー領域の座標はスクロールによって変化することが分かる.また、スクロールの度合いを知りたい場合は、pageYOffsetを使用します.

2.文書の座標


ドキュメントの座標を知りたい場合は、ビューポートの座標にスクロールの度合いを加えることで知ることができます.
setInterval(function(){
    console.log('getBoundingClientRect : ', t.getBoundingClientRect().top, 'pageYOffset:', window.pageYOffset, 'document y:', t.getBoundingClientRect().top+window.pageYOffset);
}, 1000)
3.演算子
ベルマンフォードアルゴリズムを用いた方向図の最小距離コスト