Javascript-17 (HTML position and size)

3429 ワード
html Size interactive position JavaScript テキストリンク
特にインタラクティブなイメージを実現したい人は、スクロールを見なければなりません.
実は探すたびに悪くはないのですが、仕事のスピードなどを考えると、基本的なことはまず熟知したほうがいいです.
[ Element ]
clientWidth/clientHeight

  • 読み取り専用メソッド

  • 要素のborder、scrollbar、marginに加えて、paddingを含む現在の可視部分の幅と高さも返します.
    =>つまり、表示要素のサイズのみが返され、内容のすべてが返されません.

  • 四捨五入して整数値を返します.
    =より正確な小数点以下の値を得るために、次のコードを使用します.
    element.getBoundingClientRect( )
    • clientTop/clientLeft
  • 読取り専用方法
  • 要素の余白、塗りつぶしを除いて、左/上の枠線の幅と左/上のスクロールバーの幅の和を返します.
    • scrollHeight/scrollWidth

  • 読み取り専用メソッド

  • 要素のborder、scrollbar、marginに加えて、paddingを含む要素コンテンツの完全なサイズも返します.

  • エレメントのサイズがエレメントのコンテンツのサイズより小さくても、エレメントのサイズを超えたコンテンツのサイズが反映され、コンテンツ全体のサイズがわかります.

  • 整数で四捨五入の値を返す
    ◆正確な小数点以下の値を求めたい場合は、次の
    element.getBoundingClientRect( )
    • scrollLeft/scrollTop
  • 書き込み方法
  • スクロールバー-エレメント内でスクロールする内容の幅/高さを返します.
    • offsetWidth/offsetHeight

  • 要素の余白に加えて、paddingとborderを含む幅と高さも返します.

  • 擬似要素(psedu-elements)などのサイズは含まれません.

  • display : hidden; ステータスは0を返します

  • 整数で四捨五入の値を返す
    ◆正確な小数点以下の値を求めたい場合は、次の
    • element.getBoundingClientRect( )
    offsetLeft/offsetTop
  • 要素の余白は、Left/Topで最も近い親要素を含むpadding、スクロールバー、borderの相対位置
    • を返す.
    例えば、
  • は、1つの画像を入力してオフセットポイントを撮影しようとすると、その画像の高さが固定されて出力される.
  • の場合、親要素はposition:staticに設定されていません.
    • pageXoffset/pageYoffset
  • addEventListener,windowにスクロールします.pageYoffsetを使用して、現在のY軸位置
    • を確認できます.
  • window.scrollY == window.PageYouffSetは同じ=>しかし、スクロールはEI(11以下)には適用されず、pageYouffsetはすべての位置
    • に適用される.
    getBoundingClientRect()
    window.addEventListener('scroll', function() {
	output.innerHTML = myImage.getBoundingClientRect()
})

  • そうするとbottom,height,left,top,width,x,yなどが現れます

  • Explorerではx、y値はサポートされていませんので、異なる場所に適したtopとleftを使用すると安全です.
    • [ Mouse Point Event ]
    clientX/clientY
  • の完全なコンテンツ領域(View Port)に基づいて、現在のマウスポインタの位置を返します.
    • pageX/pageY
  • ページのURL入力ウィンドウの下の実際の内容部分に従って、現在のマウスポインタの位置を返します.
  • ClientX/ClientYと同様ですが、埋め込みページは異なる値を返します.
    • offsetX/offsetY
  • イベントオブジェクトに基づいて現在のマウスポインタの位置
    • に戻る.
    screenX/screenY
  • ディスプレイ画面を基準に、現在のマウスポインタの位置を返します.
    • ビューのカスタムコントロールプロパティのカスタマイズ
    [アルゴリズム]CODEUP#2605:Candy Fang