1. Obtenez le style en ligne de l'élément
La copie de code est la suivante:
var obj = document.getElementById ("test");
alert (obj.height + "/ n" + obj.width);
// 200px 200px typeof = string affiche simplement la valeur dans l'attribut de style
2. Obtenez le style calculé
La copie de code est la suivante:
var obj = document.getElementById ("test");
var style = null;
if (window.getCompuledStyle) {
style = window.getCompuledStyle (obj, null); // non-iie
} autre {
style = obj.currentStyle; // c'est-à-dire
}
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. Retourner la chaîne automatique sous IE
3. Obtenez les styles écrits par les balises <enk> et <ystyle>
La copie de code est la suivante:
var obj = document.stylesheets [0]; // [Object StyleSheetList] Nombre de feuilles de style <Kn> var Rule = NULL; // [Objet CSSrule]
if (obj.cssrules) {
règle = obj.cssrules [0]; // non ie [objet CSSRULLELIST]
} autre {
règle = obj.rules [0]; // ie [objet cssrulelist]
}
alert (règle.style.width);
Les CSSrules (ou les règles) ne peuvent obtenir que la largeur et la hauteur des styles en ligne et en liaison, et ne peuvent pas obtenir les styles en ligne et calculés.
Résumé: Les trois méthodes ci-dessus pour obtenir des tailles d'éléments 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, ajoutez des marges intérieures, 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 visuelle de l'élément et la taille de l'espace occupé par le contenu de l'élément et les marges intérieures. Renvoie la taille de l'élément, mais aucune unité, l'unité par défaut est PX. Si vous définissez avec force l'unité, comme 100EM, il renverra toujours la taille de PX. (Si vous obtenez CSS, vous l'obtiendrez en fonction du style que vous définissez). Pour la taille réelle d'un élément, ClientWidth et ClientHeight sont comprises comme suit:
un. Ajouter les bordures sans modifications;
né Augmenter les marges sans changement;
c. Augmentez la barre de défilement, la valeur finale est égale à la taille d'origine moins la taille de la barre de défilement;
d. Augmentez la marge intérieure, la valeur finale est égale à la taille d'origine plus la marge intérieure;
La copie de code est la suivante:
<div id = "test"> </ div>
#test{
Color en arrière-plan: vert;
Largeur: 200px;
hauteur: 200px;
Border: solide 5px rouge; / * correspond à une compréhension, résultat: 200 200 * /
marge: 10px; / * Correspondant à la compréhension de B, résultat: 200 200 * /
rembourrage: 20px; / * Correspondant à C compréhension, résultat: 240 240 * /
débordement: défilement; / * Correspondant à d compréhension, résultat: 223 223,223 = 200 (taille CSS) + 40 (marges de bordure 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 la largeur et la hauteur de aucun CSS ne sont pas définies, le navigateur non IE comptera la taille calculée de la barre de défilement et de la marge, tandis que le navigateur IE retournera 0 (IE8 a été fixé).
2. Scrollwidth et ScrollHeight
Cet ensemble de propriétés peut obtenir la taille de l'élément du contenu de défilement (contenu visible). Renvoie la taille de l'élément, l'unité par défaut est PX. Si aucune largeur et hauteur CSS ne sont définies, elle obtiendra la largeur et la hauteur calculées. Pour la taille réelle de l'élément, ScrollWidth et ScrollHeight sont comprises comme suit:
1. Ajouter des frontières, différents navigateurs ont des explications différentes (ce qui suit est normal dans IE8, mais IE6 ne fonctionne pas correctement):
a) Les navigateurs de Firefox et d'opéra augmenteront la taille de la bordure, 220x220
b) IE, les navigateurs Chrome et Safari ignorent la taille de la bordure, 200x200
c) Le navigateur IE affiche uniquement la hauteur de son contenu d'origine, 200x18 (IE8 a modifié ce problème)
2. Ajouter la marge intérieure, la valeur finale sera égale à la taille d'origine plus la taille de la marge intérieure, 220x220, et c'est-à-dire 220x38
3. Ajouter la barre de défilement, la valeur finale sera égale à la taille d'origine moins la taille de la barre de défilement, 184x184, c'est-à-dire 184x18
4. Ajouter des données externes, pas de modifications.
5. Augmenter le débordement de la teneur, Firefox, Chrome et IE obtiennent la hauteur réelle du contenu, l'opéra est plus petite que la hauteur obtenue par les trois premiers navigateurs, et Safari est plus grande que la hauteur obtenue par les trois premiers navigateurs.
3. Commandte de décalage et offense
Cet ensemble de propriétés peut renvoyer la taille réelle de l'élément, y compris les bordures, les marges intérieures et les barres de défilement. Renvoie la taille de l'élément, l'unité par défaut est PX. Si aucune largeur et hauteur CSS ne sont définies, elle obtiendra la largeur et la hauteur calculées. Pour la taille réelle de l'élément, la largeur de décalage et les offres sont comprises comme suit:
1. Ajouter la bordure, la valeur finale sera égale à la taille d'origine plus la taille de la bordure, qui est de 220;
2. Ajouter la marge intérieure, la valeur finale sera égale à la taille d'origine plus la taille de la marge intérieure, qui est de 220;
3. Ajouter des données externes, pas de modifications;
4. Ajouter les barres de défilement, aucune modification et ne diminuera pas;
Pour obtenir des tailles d'éléments, il s'agit généralement d'éléments au niveau des blocs et il est plus pratique de définir les éléments de taille CSS. Il est particulièrement gênant s'il s'agit d'un élément en ligne ou d'un élément qui n'a pas d'ensemble de taille, il est donc recommandé de faire attention lors de l'utilisation.
La copie de code est la suivante:
<div id = "test"> Test div Element </div>
#test{
Color en arrière-plan: vert;
Largeur: 200px;
hauteur: 200px;
Border: Solid 10px rouge; / * Résultat: 220 220 * /
marge: 10px; / * Résultat: 220 220 (pas de changement) * /
rembourrage: 10px; / * Résultat: 240,240 * /
débordement: défilement; / * Résultat: 240 240 (pas de changement) * /
}
window.onload = function () {
var obj = document.getElementById ("test");
alert (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 l'élément régler la bordure gauche et la bordure supérieure. Actuellement, seuls les groupes gauche et supérieur sont disponibles et la droite et le bas ne sont pas disponibles. Si la largeur des quatre côtés est différente, vous pouvez l'obtenir directement à travers le style calculé ou utiliser les trois groupes ci-dessus pour obtenir la taille de l'élément pour obtenir la soustraction.
Largeur de la frontière droite: obj.offsetwidth-obj.clientwidth-obj.clientleft
Largeur de la frontière inférieure: obj.offsetheight-obj.clientheight-obj.clienttop
La copie de code est la suivante:
<div id = "test"> Test div Element </div>
#test{
Color en arrière-plan: vert;
Largeur: 200px;
hauteur: 200px;
Border-top: solide 10px rouge; s
Border-droite: solide 20px # 00FF00;
Border-Bottom: Solid 30px bleu;
Border-Left: solide 40px # 808080;
}
window.onload = function () {
var obj = document.getElementById ("test");
alert (obj.clientleft + "," + obj.clienttop); // 40,10
};
2. Offset et décalage
Cet ensemble d'attributs peut obtenir la position de l'élément actuel par rapport à l'élément parent. Pour obtenir la position actuelle de l'élément par rapport à l'élément parent, il est préférable de le régler en position de position: Absolute; Sinon, différents navigateurs auront des explications différentes.
un. Définir la position sur Absolute, tous les navigateurs renvoient la même valeur. comme:
La copie de code est la suivante:
<div id = "test"> Test div Element </div>
#test{
Color en arrière-plan: vert;
Largeur: 200px;
hauteur: 200px;
Position: absolue;
Gauche: 30px;
En haut: 20px;
}
window.onload = function () {
var obj = document.getElementById ("test");
alert (obj.offsetleft + "," + obj.offsetTop); // 30, 20
};
né L'ajout de la bordure et de la marge intérieure n'affectera pas sa position, mais l'ajout des données externes s'accumulera.
3. Box.OffsetParent obtient l'élément parent
Dans OffsetParent, si l'élément parent lui-même est <body>, le non-IE renvoie un objet corporel, et IE (IE6) renvoie un objet HTML. Si deux éléments sont imbriqués, si la position de positionnement: Absolute n'est pas utilisé sur l'élément parent, alors OffsetParent renverra l'objet corporel ou l'objet HTML. Par conséquent, lors de l'obtention de décalage et de décalage, le positionnement CSS est très important.
Si, à plusieurs niveaux, la couche externe a été positionnée, comment pouvons-nous obtenir la distance entre les éléments de la couche intérieure à partir du corps ou des éléments HTML? C'est-à-dire obtenir l'emplacement de n'importe quel élément de la page. Ensuite, nous pouvons écrire des fonctions et les réaliser en remontant constamment vers le haut pour obtenir une accumulation.
La copie de code est la suivante:
box.offsettop + box.offsetparent.offSetTop; // quand il n'y a que deux couches
fonction offsetleft (élément) {
var gauche = élément.offsetLeft; // Obtenez la première distance de couche
var parent = element.offsetparent; // Obtenez le premier élément parent
while (parent! == null) {// s'il y a un élément parent précédent
gauche + = parent.offsetLeft; // ajoute les distances de cette couche
parent = parent.offsetparent; // Obtenez l'élément parent de cette couche
} // continue ensuite la boucle
retour à gauche;
}
4. Scrolltop et défilement
Cet ensemble de propriétés peut obtenir la taille de la zone de la barre de défilement cachée (la zone au-dessus de la barre de défilement), ou réglée pour la positionner dans cette zone. Si vous souhaitez faire défiler la barre de défilement à sa position initiale, vous pouvez écrire une fonction:
La copie de code est la suivante:
fonction ScrollStart (élément) {
if (element.scrolltop! = 0) {
element.scrolltop = 0;
}
}
5. GetBoundingClientRect ()
Cette méthode renvoie un objet rectangulaire avec quatre propriétés: gauche, haut, à droite et en bas. Il indique la distance entre chaque bord de l'élément et le côté supérieur et gauche de la page.
La copie de code est la suivante:
var box = document.getElementById ('box'); // Obtenez un élément
alert (box.getBoundingClientRect (). Top); // La distance au-dessus de l'élément est en haut de la page
alert (box.getBoundingClientRect (). à droite); // la distance à droite de l'élément de la gauche de la page
alert (box.getBoundingClientRect (). en bas); // La distance sous l'élément est en haut de la page
alert (box.getBoundingClientRect (). gauche); // la distance à gauche de l'élément de la gauche de la page
Remarque: IE, Firefox3 +, Opera9.5, Chrome et Safari Support. Dans IE, les coordonnées par défaut sont calculées à partir de (2, 2), résultant en une distance finale de deux pixels de plus que les autres navigateurs. Nous devons être compatibles.
La copie de code est la suivante:
document.DocumentElement.ClientTop; // Nonie est 0, c'est-à-dire 2
document.DocumentElement.ClientLeft; // Nonie est 0, c'est-à-dire 2
functionGgetRect (élément) {
var rect = element.getBoundingClientRect ();
var top = document.DocumentElement.ClientTop;
var left = document.DocumentElement.ClientLeft;
retourner{
en haut: rect.top - en haut,
en bas: recult.bottom - en haut,
à gauche: rect.left - à gauche,
à droite: rect.Right - gauche
}
}
Ajoutez des bords externes, des marges intérieures, des frontières et des barres de défilement respectivement 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 pouvez l'aimer.