JavaScript obtient la taille des éléments et les compétences d'opération de taille summary_javascript

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

Copier le code Le code est le suivant :

var obj = document.getElementById("test");
alert(obj.height "n" obj.width);
// 200px 200px typeof=string affiche simplement la valeur dans l'attribut style

2. Obtenez le style calculé

Copier le code Le code est le suivant :

var obj = document.getElementById("test");
var style = nul;
si (window.getComputedStyle) {
Style = window.getComputedStyle(obj, null); // Non-IE
} autre {
Style = obj.currentStyle; // IE
>
alert("width=" style.width "nheight=" style.height);

Remarque : si la largeur et la hauteur de l'élément ne sont pas définies, la largeur et la hauteur par défaut seront renvoyées dans les navigateurs non IE. Renvoie la chaîne automatique

sous IE

3. Obtenez les styles écrits dans les balises <link> et <style>

Copier le code Le code est le suivant :

var obj = document.styleSheets[0]; // [objet StyleSheetList] Nombre de feuilles de style<link>var règle = null;// [objet CSSRule]

si (obj.cssRules){
Rule = obj.cssRules[0]; // Non-IE [objet CSSRuleList]
} autre {
Rule = obj.rules[0]; // IE [objet CSSRuleList]
}
alerte(rule.style.width);

cssRules (ou règles) ne peuvent obtenir que la largeur et la hauteur des styles en ligne et des liens, mais ne peuvent 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. Par exemple, ajouter du remplissage, des barres de défilement, des bordures, etc.

4. Obtenez la taille réelle de l'élément

1. clientWidth et clientHeight

Cet ensemble d'attributs peut obtenir la taille de la zone visible de l'élément ainsi que l'espace occupé par le contenu et le remplissage de l'élément. La taille de l'élément est renvoyée, mais il n'y a pas d'unité. L'unité par défaut est px. Si vous définissez de force l'unité, par exemple 100em, elle renverra toujours la taille de px. (Si CSS est obtenu, il sera obtenu selon le style que vous avez défini). Pour la taille réelle de l'élément, clientWidth et clientHeight s'entendent comme suit :

a. Ajouter une bordure, aucun changement
b. Ajouter une marge, aucun changement
c. Augmentez la barre de défilement, et la valeur finale est égale à la taille originale moins la taille de la barre de défilement
; d. Augmentez le remplissage, la valeur finale est égale à la taille d'origine plus la taille du remplissage
;

Copier le code Le code est le suivant :

<div id="test"></div>

#test{
couleur de fond : vert ;
Largeur : 200 px ;
hauteur : 200px ;
Bordure : rouge uni 5px ; /* Correspond à une compréhension, résultat : 200 200 */
Marge : 10px ; /* Correspond à b compréhension, résultat : 200,200*/
Remplissage : 20px ; /* Correspond à la compréhension c, résultat : 240,240*/
Overflow: scroll; /* Correspondant à d compréhension, le résultat est : 223, 223, 223=200 (taille css) 40 (remplissage des deux côtés) - 17 (largeur de la barre de défilement) */
>
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.clientWidth "," obj.clientHeight);
};

Remarque : si aucune largeur ni hauteur CSS n'est définie, les navigateurs non-IE incluront la taille calculée de la barre de défilement et du remplissage, tandis que les navigateurs IE renverront 0 (corrigé dans IE8).

2. scrollWidth et scrollHeight
Cet ensemble de propriétés peut obtenir la taille des éléments du contenu défilant (contenu visible). Renvoie la taille de l'élément, l'unité par défaut est px. Si vous ne définissez aucune largeur et hauteur CSS, la largeur et la hauteur calculées seront obtenues. Pour la taille réelle de l'élément, scrollWidth et scrollHeight s'entendent comme suit :
1. Ajoutez des bordures, différents navigateurs ont des interprétations différentes (ce qui suit fonctionne normalement dans IE8, mais pas dans IE6) :
a) Les navigateurs Firefox et Opera augmenteront la taille de la bordure, 220x220
b) Les navigateurs IE, Chrome et Safari ignoreront la taille de la bordure, 200x200
c) Le navigateur IE affiche uniquement la hauteur de son contenu original, 200x18 (IE8 a corrigé ce problème)
2. Ajoutez un remplissage, la valeur finale sera égale à la taille d'origine plus la taille du remplissage, 220x220, IE est 220x38
3. Ajoutez une barre de défilement, la valeur finale sera égale à la taille d'origine moins la taille de la barre de défilement, 184x184, IE est 184x18
4. Ajout de bastions aux frontières extérieures, aucun changement.
5. Augmentez le débordement de contenu. Firefox, Chrome et IE obtiennent la hauteur réelle du contenu. Opera obtient une hauteur plus petite que les trois premiers navigateurs, et Safari obtient une hauteur plus grande que les trois premiers navigateurs.

3. offsetWidth et offsetHeight
Cet ensemble de propriétés peut renvoyer la taille réelle de l'élément, y compris les bordures, le remplissage et les barres de défilement. Renvoie la taille de l'élément, l'unité par défaut est px. Si vous ne définissez aucune largeur et hauteur CSS, la largeur et la hauteur calculées seront obtenues. Pour la taille réelle de l'élément, offsetWidth et offsetHeight s'entendent comme suit :
1. Ajoutez une bordure, la valeur finale sera égale à la taille d'origine plus la taille de la bordure, qui est de 220 ; 2. Augmentez le remplissage, la valeur finale sera égale à la taille d'origine plus la taille du remplissage, qui est de 220
; 3. Ajout de bastions aux frontières extérieures, aucun changement
 ; 4. Ajoutez une barre de défilement, aucun changement, aucune diminution
 ; Pour obtenir la taille des éléments, il est généralement plus pratique d’utiliser des éléments au niveau bloc et des éléments avec des tailles CSS définies. C'est particulièrement gênant s'il s'agit d'un élément en ligne (inline) ou d'un élément sans taille définie, il est donc recommandé de faire attention lors de son utilisation.

Copier le code Le code est le suivant :

<div id="test">tester l'élément div</div>
#test{
couleur de fond : vert ;
Largeur : 200 px ;
hauteur : 200px ;
Bordure : rouge uni de 10 px ; /*Résultat : 220 220*/
Marge : 10px ; /*Résultat : 220 220 (aucun changement)*/
Remplissage : 10 px ; /*Résultat : 240 240*/
Débordement : défilement ; /*Résultat : 240 240 (aucun changement)*/
>
window.onload = function(){
var obj = document.getElementById("test");
​​ alerte(obj.offsetWidth "," obj.offsetHeight);
};

5. Obtenez la taille environnante de l'élément
1. clientLeft et clientTop obtiennent la taille de la bordure Cet ensemble d'attributs peut obtenir la taille de la bordure gauche et de la bordure supérieure définies par l'élément. Actuellement, seuls les groupes Gauche et Haut sont fournis, tandis que Droite et Bas ne le sont pas. Si la largeur des quatre côtés est différente, elle peut être obtenue directement via le style calculé, ou par soustraction des trois groupes ci-dessus pour obtenir la taille de l'élément.
La largeur de la bordure droite : obj.offsetWidth-obj.clientWidth-obj.clientLeft
Largeur de la bordure inférieure : obj.offsetHeight-obj.clientHeight-obj.clientTop

Copier le code Le code est le suivant :

<div id="test">tester l'élément div</div>
#test{
couleur de fond : vert ;
Largeur : 200 px ;
hauteur : 200px ;
Bordure supérieure : rouge uni 10 px ;s
Bordure droite : solide 20px #00ff00;
Bordure inférieure : bleu uni de 30 px ;
Bordure gauche : solide 40px #808080 ;
>
window.onload = function(){
var obj = document.getElementById("test");
alerte(obj.clientLeft "," obj.clientTop); // 40,10
};

2. offsetLeft et offsetTop
Cet ensemble d'attributs peut obtenir la position de l'élément actuel par rapport à l'élément parent. Pour obtenir la position actuelle d'un élément par rapport à son élément parent, il est préférable de le définir sur position:absolute; sinon différents navigateurs auront des interprétations différentes.
a. Définissez la position sur absolue et tous les navigateurs renverront la même valeur. Tel que :

Copier le code Le code est le suivant :

<div id="test">tester l'élément div</div>
#test{
couleur de fond : vert ;
Largeur : 200 px ;
hauteur : 200px ;
Position : absolue ;
Gauche : 30 px ;
haut : 20 px ;
>
window.onload = function(){
var obj = document.getElementById("test");
alerte(obj.offsetLeft "," obj.offsetTop); // 30, 20
};

b. L'ajout de bordures et de remplissage n'affectera pas sa position, mais l'ajout d'un remplissage extérieur s'additionnera.

3. box.offsetParent obtient l'élément parent
Dans offsetParent, si l'élément parent est <body>, non-IE renverra l'objet body et IE (IE6) renverra l'objet html. Si deux éléments sont imbriqués, si l'élément parent supérieur n'utilise pas position:absolute, alors offsetParent renverra l'objet corps ou l'objet html. Par conséquent, le positionnement CSS est très important lors de l’obtention de offsetLeft et offsetTop.
Si, dans de nombreux calques, la couche externe a été positionnée, comment obtenir la distance entre les éléments de la couche interne et les éléments body ou html ? Autrement dit, obtenez la position de n’importe quel élément sur la page. Ensuite, nous pouvons écrire une fonction pour réaliser l’accumulation en revenant continuellement vers le haut.

Copier le code Le code est le suivant :

box.offsetTop box.offsetParent.offsetTop; // Lorsqu'il n'y a que deux calques

fonction offsetLeft(élément){
var left = element.offsetLeft; // Obtenez la distance du premier calque
var parent = element.offsetParent; // Récupère le premier élément parent
While (parent !== null) { // S'il existe un élément parent précédent
           left = parent.offsetLeft; // Accumuler la distance de ce calque
         parent = parent.offsetParent; // Récupère l'élément parent de ce calque
} //Puis continuez la boucle
Retourner à gauche ;
>

4.scrollTop et scrollLeft
Cet ensemble d'attributs peut obtenir la taille de la zone où la barre de défilement est masquée (la zone au-dessus de la barre de défilement) et peut également être défini pour localiser cette zone. Si vous souhaitez que la barre de défilement défile jusqu'à la position initiale, vous pouvez écrire une fonction :

Copier le code Le code est le suivant :

fonction scrollStart (élément) {
Si ( element.scrollTop != 0 ) {
          element.scrollTop = 0;
>
>

5.getBoundingClientRect()
Cette méthode renvoie un objet rectangle contenant quatre propriétés : gauche, haut, droite et bas. Représente la distance entre chaque côté de l’élément et respectivement les côtés supérieur et gauche de la page.

Copier le code Le code est le suivant :

var box=document.getElementById('box'); // Récupère l'élément
alert(box.getBoundingClientRect().top); // La distance entre le haut de l'élément et le haut de la page
alert(box.getBoundingClientRect().right); //La distance entre le côté droit de l'élément et le côté gauche de la page
alert(box.getBoundingClientRect().bottom); //La distance entre le bas de l'élément et le haut de la page
alert(box.getBoundingClientRect().left); //La distance entre le côté gauche de l'élément et le côté gauche de la page

Remarque : IE, Firefox3, Opera9.5, Chrome et Safari sont pris en charge. Dans IE, les coordonnées par défaut sont calculées à partir de (2,2), ce qui fait que la distance finale est de deux pixels supérieure à celle des autres navigateurs dont nous avons besoin. pour faire un compatible.

Copier le code Le code est le suivant :

document.documentElement.clientTop; //Non-IE est 0, IE est 2
document.documentElement.clientLeft; //Non-IE est 0, IE est 2
functiongGetRect (élément) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
Retour{
HAUT : RECT.TOP -TOP,
bas : rect.bottom - haut,
gauche Droite : rect.droite - gauche
>
>

Ajoutez respectivement des marges extérieures, des marges intérieures, des bordures et des barres de défilement pour tester si tous les navigateurs sont cohérents.

Ce qui précède est tout le contenu décrit dans cet article, j'espère que vous l'aimerez.