Größe und Position von JavaScript-DOM-Elementen_Grundkenntnisse

1 Ermitteln Sie die CSS-Größe des Elements

1. Ermitteln Sie die Größe des Elements über den Inline-Stil

Code kopieren Der Code lautet wie folgt:

var box = document.getElementById('box'); // Element abrufen;
box.style.width; box.style.height;

// PS: Der Stil kann nur die Breite und Höhe des Inline-Stilattributs abrufen. Wenn es eines gibt, geben Sie es leer zurück

2. Ermitteln Sie die Größe des Elements durch Berechnung

Code kopieren Der Code lautet wie folgt: var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;

      style.width;                                       

// PS: Ermitteln Sie die Größe des Elements durch Berechnung. Unabhängig davon, ob es sich um Inline/Inline oder Link handelt, wird das berechnete Ergebnis zurückgegeben // Wenn die Größe selbst festgelegt ist, wird die Größe des Elements zurückgegeben. Wenn sie nicht selbst festgelegt ist, gibt Nicht-IE die Standardgröße zurück und IE gibt Auto zurück

3. Ermitteln Sie die Größe des Elements über das Attribut „cssRules“ (oder „rules“) im CSSStyleSheet-Objekt

Code kopieren
Der Code lautet wie folgt:

var sheet = document.styleSheets[0]; var sheet var Rule = (sheet.cssRules || sheet.rules)[0]; // Erste Regel abrufen; Rule.style.width; Rule.style.width; // 200px;
PS: cssRules kann nur die Breite und Höhe von Inline- und Link-Stilen ermitteln, jedoch keine Inline- und berechneten Stile Zusammenfassung: Mit den oben genannten drei CSS-Methoden zum Ermitteln der Elementgröße kann nur die CSS-Größe des Elements ermittelt werden, nicht jedoch die tatsächliche Größe des Elements selbst;

2 Ermitteln Sie die tatsächliche Größe des Elements

1.clientWidth und clientHeight

Dieser Satz von Attributen kann die Größe des visuellen Bereichs des Elements ermitteln, einschließlich des vom Inhalt und der Polsterung des Elements eingenommenen Platzes box.clientWidth; // 200;

PS: Die Elementgröße wird zurückgegeben, aber es gibt keine Einheit. Die Standardeinheit ist px; PS: In Bezug auf die tatsächliche Größe des Elements werden clientWidth und clientHeight wie folgt verstanden:
​ 1. Fügen Sie dem Element einen Rahmen hinzu, keine Änderung, 200;
​ 2. Äußeren Rahmen zum Element hinzufügen, keine Änderung, 200;
3. Bildlaufleiste hinzufügen, Endwert = Originalgröße - Bildlaufleistengröße; 4. Polsterung erhöhen, Endwert = Originalgröße Polstergröße 220; PS: Wenn keine CSS-Breite und -Höhe festgelegt sind, berücksichtigt Nicht-IE die berechnete Größe der Bildlaufleiste und den Abstand, während IE 0 zurückgibt

2.scrollWidth und scrollHeight


Dieser Satz von Attributen kann die Gesamthöhe des Elementinhalts ohne Bildlaufleisten ermitteln

box.scrollWidth;

// PS: Gibt die Elementgröße zurück, die Standardeinheit ist px; wenn keine CSS-Breite und -Höhe festgelegt sind, werden die berechnete Breite und Höhe erhalten; 3.offsetWidth und offsetHeight

Dieser Satz von Attributen kann die tatsächliche Größe des Elements zurückgeben, einschließlich Ränder/Abstände und Bildlaufleisten box.offsetWidth; 200
PS: Die Elementgröße wird zurückgegeben und die Standardeinheit ist px; wenn keine CSS-Breite und -Höhe festgelegt sind, werden die berechnete Breite und Höhe erhalten PS: Bezüglich der tatsächlichen Größe des Elements lautet das Verständnis wie folgt:

1. Rand hinzufügen, Endwert = Originalgröße Randgröße 220; 2. Polsterung erhöhen, Endwert = Originalgröße Polstergröße 220; ​ 3. Festungen an den Außengrenzen hinzugefügt, keine Änderung;

​ 4. Erhöhen Sie die Bildlaufleiste, keine Änderung, keine Verringerung; PS: Um die Elementgröße zu ermitteln, ist es im Allgemeinen bequemer, Elemente auf Blockebene mit festgelegten CSS-Größen zu verwenden

3 Ermitteln Sie die umgebende Größe des Elements



1.clientLeft und clientTop

// Dieser Satz von Attributen kann die Größe des linken und oberen Randes erhalten, die vom Element
festgelegt wird box.clientLeft;

2.offsetLeft und offsetTop (Offset)

3.scrollTop und scrollLeft

Vier getBoundingClientRect()-Methode

// 这组属性可以获取当前元素边框相对于父元素边框的位置;
  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;                 // 得到最终距离;
  }

Fünf Zusammenfassung

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

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

1. Versatzmaß: umfasst den gesamten sichtbaren Platz, den das Element auf dem Bildschirm einnimmt; Die sichtbare Größe eines Elements wird durch seine Höhe und Breite bestimmt, einschließlich Füll-/Bildlaufleisten und Rändern

2. Client-Dimension: Bezieht sich auf den vom Elementinhalt eingenommenen Platz und seine Auffüllung; 3. Scroll-Größe (Scroll-Dimension): Die Größe des Elements, das den Scroll-Inhalt enthält;