JavaScriptのDOM要素のサイズと位置_基礎知識-jsチュートリアル-php.cn

JavaScriptのDOM要素のサイズと位置_基礎知識

WBOY

リリース： 2016-05-16 16:04:33

オリジナル

1253 人が閲覧しました

1 要素の CSS サイズを取得します

1. style inline を通じて要素のサイズを取得します

コードをコピーコードは次のとおりです:

var box = document.getElementById('box') // 要素を取得します;

ボックス.スタイル.幅;
ボックス.スタイル.高さ;

// PS: style はインラインスタイル属性の CSS スタイルでのみ幅と高さを取得します。存在しない場合は空を返します。

2. 要素のサイズを計算によって取得します

コードをコピーしますコードは次のとおりです: var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;

style.width;

// PS: 要素のサイズを計算によって取得すると、インライン/インラインまたはリンクに関係なく、計算された結果が返されます。
// サイズが独自に設定されている場合は要素のサイズが返され、IE 以外の場合はデフォルトのサイズが返され、IE は auto を返します。


3. CSSStyleSheet オブジェクトの cssRules (または rules) 属性を通じて要素のサイズを取得します。

コードをコピーします
コードは次のとおりです:

var シート = document.styleSheets[0]; var rules = (sheet.cssRules || Sheet.rules)[0] // 最初のルールを取得します;; Rule.style.width; // 200px;
PS: cssRules はインラインスタイルとリンクスタイルの幅と高さのみを取得できますが、インラインスタイルと計算スタイルを取得することはできません。概要: 要素のサイズを取得する上記の 3 つの CSS メソッドは、要素の CSS サイズのみを取得できますが、パディング/スクロールバー/ボーダーの追加など、要素自体の実際のサイズを取得することはできません。

2 要素の実際のサイズを取得します

1.clientWidth と clientHeight

この一連の属性は、要素のコンテンツとパディングが占めるスペースを含む、要素の視覚領域のサイズを取得できます。 box.clientWidth; // 200;

PS: 要素のサイズが返されますが、デフォルトの単位は

です。 PS: 要素の実際のサイズに関して、clientWidth と clientHeight は次のように理解されます:
1. 要素に境界線を追加します。変更なし、200;
2. 要素に外枠を追加します。変更なし、200;
3. スクロールバーを追加します。最終値 = 元のサイズ - スクロールバーのサイズ
4. パディングを増やします。最終値 = 元のサイズのパディングサイズ
PS: CSS の幅と高さが設定されていない場合、IE 以外ではスクロールバーとパディングの計算されたサイズが含まれますが、IE では
が返されます。

2.scrollWidth とscrollHeight

この一連の属性は、スクロールバーなしで要素コンテンツの合計の高さを取得できます。 box.scrollWidth; // PS: 要素のサイズを返します。デフォルトの単位は px です。CSS の幅と高さが設定されていない場合は、計算された幅と高さが取得されます。

3.offsetWidth と offsetHeight

この属性セットは、ボーダー/パディング、スクロールバーを含む要素の実際のサイズを返すことができます。

ボックス.オフセット幅 200 PS: 要素のサイズが返されます。デフォルトの単位は px です。CSS の幅と高さが設定されていない場合は、計算された幅と高さが取得されます。 PS: 要素の実際のサイズについては、次のように理解します。 1. 境界線を追加します。最終値 = 元のサイズの境界線サイズ

2. パディングを増やします。最終値 = 元のサイズのパディングサイズ

3. 外部国境要塞を追加しました。変更はありません;
4. スクロールバーを増やします。変化も減少もありません。

PS: 要素のサイズを取得するには、一般に CSS サイズが設定されたブロックレベルの要素を使用する方が便利です。

3 要素の周囲のサイズを取得します

1.clientLeft と clientTop

// この属性セットは、要素によって設定された左枠と上枠のサイズを取得できます。 box.clientLeft; 2.offsetLeft と offsetTop (オフセット)

3.scrollTop とscrollLeft

// 这组属性可以获取当前元素边框相对于父元素边框的位置;
  box.offsetLeft;                  // 50;
  // PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute;
  // PS:加上边框和内边距不会影响它的位置,但加上外边据会累加;

  box.offsetParent;                 // 得到父元素;
  // PS:offsetParent中,如果本身父元素是<body>,非IE返回body对象,IE返回html对象;
  // 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回body或html对象;

// 如果说在很多层次里,外层已经定位,获取任意一个元素距离页面上的位置,可以不停的向上回溯获取累加来实现;
  box.offsetTop+box.offsetParent.offsetTop;     // 只有两层的情况下;
  // 如果多层的话,就必须使用循环或递归;
  function offsetLeft(element){
    var left = element.offsetLeft;        // 得到第一层距离;
    var parent = element.offsetParent;      // 得到第一个父元素;
    while(parent !== null){            // 判断如果还有上一层父元素;
      left += parent.offsetLeft;        // 将得到的距离累加;
      parent = parent.offsetParent;       // 将父元素也回溯;
    }                       // 然后循环;
    return left;                 // 得到最终距离;
  }

ログイン後にコピー

4 つの getBoundingClientRect() メソッド

// 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域;
  box.scrollTop;                  // 获取滚动内容上方的位置;

// 设置滚动条滚动到最初始的位置;
  function scrollStart(element){
    if(element.scrollTop != 0){
      element.scrollTop = 0;
    }
  }

ログイン後にコピー

5つのまとめ
1. オフセット寸法: 画面上の要素が占めるすべての表示スペースを含みます。要素の表示サイズは、パディング/スクロールバーと境界線を含む高さと幅によって決まります。 2. クライアントディメンション: 要素のコンテンツとそのパディングが占めるスペースを指します。 3.スクロールサイズ (スクロール寸法): スクロールするコンテンツを含む要素のサイズ。