Taille et position des éléments JavaScript DOM_Connaissances de base

1 Obtenez la taille CSS de l'élément

1. Obtenez la taille de l'élément via le style en ligne

Copier le code Le code est le suivant :

var box = document.getElementById('box'); // Obtenir l'élément ;
boîte.style.largeur; boîte.style.hauteur;

// PS : le style ne peut obtenir que la largeur et la hauteur dans le style CSS de l'attribut de style en ligne, s'il y en a un, s'il n'y en a pas, retournez vide ;

2. Obtenir la taille de l'élément par calcul

Copier le code Le code est le suivant : var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null box.currentStyle;

      style.width;                                         

// PS : Obtenez la taille de l'élément par calcul, qu'il soit en ligne/en ligne ou en lien, il renvoie le résultat calculé
 ; // Si la taille est définie par elle-même, elle renverra la taille de l'élément ; si elle n'est pas définie par elle-même, non-IE renverra la taille par défaut et IE renverra auto
;

3. Obtenez la taille de l'élément via l'attribut cssRules (ou règles) dans l'objet CSSStyleSheet

Copier le code

Le code est le suivant : var feuille = document.styleSheets[0]; var feuille var règle = (sheet.cssRules || sheet.rules)[0]; // Récupère la première règle ; Règle.style.width; Règle.style.width; // 200px;

PS : cssRules ne peut obtenir que la largeur et la hauteur des styles en ligne et des liens, mais ne peut pas obtenir les styles en ligne et calculés  ;

Résumé : les trois méthodes CSS ci-dessus pour obtenir la taille de l'élément ne peuvent obtenir que la taille CSS de l'élément, mais ne peuvent pas obtenir la taille réelle de l'élément lui-même, comme l'ajout d'un remplissage/barre de défilement/bordure ;

2 Obtenez la taille réelle de l'élément

1.clientWidth et clientHeight

Cet ensemble d'attributs peut obtenir la taille de la zone visuelle de l'élément, y compris l'espace occupé par le contenu et le remplissage de l'élément
; box.clientWidth; // 200;
PS : La taille de l'élément est renvoyée, mais il n'y a pas d'unité. L'unité par défaut est px
. PS : Concernant la taille réelle de l'élément, clientWidth et clientHeight s'entendent comme suit :
​ 1. Ajouter une bordure à l'élément, aucun changement, 200 ;
​ 2. Ajouter une bordure extérieure à l'élément, aucun changement, 200 ;
3. Ajoutez une barre de défilement, valeur finale = taille originale - taille de la barre de défilement
; 4. Augmenter le remplissage, valeur finale = taille de remplissage originale ; 220 ; PS : si aucune largeur ni hauteur CSS n'est définie, alors non-IE inclura la taille calculée de la barre de défilement et du remplissage tandis qu'IE renverra 0 ;

2.scrollWidth et scrollHeight

Cet ensemble d'attributs permet d'obtenir la hauteur totale du contenu de l'élément sans barres de défilement

; box.scrollWidth;

// PS : renvoie la taille de l'élément, l'unité par défaut est px ; si aucune largeur et hauteur CSS n'est définie, il obtiendra la largeur et la hauteur calculées
 ;

3.offsetWidth et offsetHeight

Cet ensemble d'attributs peut renvoyer la taille réelle de l'élément, y compris les bordures/remplissage et les barres de défilement

 ; box.offsetWidth; 200

PS : la taille de l'élément est renvoyée et l'unité par défaut est px ; si aucune largeur et hauteur CSS n'est définie, elle obtiendra la largeur et la hauteur calculées
 ; PS : Concernant la taille réelle de l'élément, la compréhension est la suivante :
1. Ajouter une bordure, valeur finale = taille de bordure originale ; 220 ; 2. Augmenter le remplissage, valeur finale = taille de remplissage originale ; 220 ; ​ 3. Ajout de bastions aux frontières extérieures, aucun changement ;
​ 4. Augmentez la barre de défilement, pas de changement, pas de diminution ;

PS : Pour obtenir la taille des éléments, il est généralement plus pratique d'utiliser des éléments au niveau du bloc avec des tailles CSS définies ;

3 Obtenez la taille environnante de l'élément

1.clientLeft et clientTop // Cet ensemble d'attributs peut obtenir la taille de la bordure gauche et de la bordure supérieure définies par l'élément

 ; box.clientLeft;

2.offsetLeft et offsetTop (décalage)

3.scrollTop et 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;                 // 得到最终距离;
  }

Quatre méthodes getBoundingClientRect()

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

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

Cinq résumés

// 这个方法返回一个矩形对象,包含四个属性:left/top/right和bottom;
// 分别表示元素各边与页面上边和左边的距离;
  var box = document.getElementById('box');
  alert(box.getBoundingClientRect().top);    // 元素上边距离页面上边的距离;
  alert(box.getBoundingClientRect().right);   // 元素右边距离页面左边的距离;
  alert(box.getBoundingClientRect().bottom);   // 元素下边距离页面上边的距离;
  alert(box.getBoundingClientRect().left);    // 元素左边距离页面左边的距离;
  // PS:IE/Firefox/Opera/Chrome/Safari都支持;
  // 但在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素;
  document.documentElement.clientTop;      // 非IE为0,IE为2;
  document.documentElement.clientLeft;      // 非IE为0,IE为2;
// 兼容getBoundingClientRect()
  function getRect(element){
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left = document.documentElement.clientLeft;
    return {
      top:rect.top-top,           // 元素上边距-页面的上边距(0-0或2-2);
      bottom:rect.bottom-top,
      left:rect.left-left,         // 元素左边距-页面的左边距(0-0或2-2);
      right:rect.right-left
    }
  };

1. Dimension de décalage : inclut tout l'espace visible occupé par l'élément sur l'écran

La taille visible d'un élément est déterminée par sa hauteur et sa largeur, y compris les barres de remplissage/défilement et les bordures

 ; 2. Dimension client : fait référence à l'espace occupé par le contenu de l'élément et son remplissage ; 3.Taille du défilement (dimension du défilement) : La taille de l'élément contenant le contenu défilant