top, offsetTop et getBoundingClientRect().top

Version imprimable

Voir 40 message(s) de cette discussion en une page

20/02/2018, 19h44
Beginner.

top, offsetTop et getBoundingClientRect().top

Salut,

J'ouvre ce fil car aimerais être sûr de bien comprendre ces trois propriétés...
Je pense que ce sont trois propriétés distinctes mais qui ont parfois la même valeur...

Est-ce que vous auriez un petit résumé des différences et des points communs ?

-------

1- Au sujet de top je lis :

Citation:

Pour les éléments qui sont positionnés de manière absolue (position: absolute ou position: fixed), cette propriété définit la distance entre le bord haut de la marge (margin) de l'élément et le bord haut du bloc englobant.

Quel est ce bloc englobant ? Est-ce le parent directe que celui-ci soit positionné ou non ?
20/02/2018, 19h57
Beginner.

Pour offsetTop c'est l'embrouille :

Ici on a

Citation:

The returned value includes:

the top position, and margin of the element
the top padding, scrollbar and border of the offsetParent element

Je n'ai pas compris mais ils ont l'air de dire que la mage est incluse alors qu'ici ils ont l'air de dire me contraire :

Citation:

The returned value is the top position of the object including the padding, scrollBar, and the border, but excluding the margin.

1- Alors est-ce que ce offsetTop c'est la position du coin supérieure gauche de la borderBox ou de la marginBox ?

---> Pour top c'est la marginBox si j'ai bien compris :

Citation:

Pour les éléments qui sont positionnés de manière absolue (position: absolute ou position: fixed), cette propriété définit la distance entre le bord haut de la marge (margin) de l'élément et le bord haut du bloc englobant.

---> Et pour getBoundingClientRect().top ce serait la borderBox :

Citation:

getBoundingClientRect().top, bottom, left, right (location of the element's border box/bounding box when CSS transforms are applied)

source ! Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9 (Internet Explorer)
20/02/2018, 20h45
Invité

Bonjour,

1-

Citation:

Quel est ce bloc englobant ?

Le 1er parent positionné

2- offsetTop

Fais des tests si tu es confus.
21/02/2018, 13h29
Beginner.

Ok Merci.

Ils auraient quand même pu le préciser !

Sinon pour OffsetTop j'en avais déjà fait des tests : offsetTop : propriété fiable ou pas ? mais j'avais la flemme d'en refaire sur plusieurs navigateurs...

Je trouve que c'est une infos qui devrait être fournie, je ne trouve pas trop normal de devoir tout tester sur tous les navigateurs, ce serait trop long...

Enfin j'ai testé sur Chrome :

1- Tous les offset (offsetTop, offsetLeft, offsetHeight...) semblent concerner la borderBox (et non la marginBox) et c'est pareil pour getBoundingClientRect().

La différence entre les offsets et getBoundingClientRect() c'est la référence / le repère :

- la position avec les offsets (offsetTop et offsetLeft) est relative au premier parent positionné (offsetParent).
- Alors qu'avec getBoundingClientRect() (top et left) elle est relative au viewport...

Pour les dimensions, je pense que les offsets (offsetHeight et offsetWidth) et getBoundingClientRect() (height et width) sont identiques...

A suivre...
21/02/2018, 13h48
Beginner.

top est donc différent de offsetTop ---> top concerne la marginBox et offsetTop la borderBox.

- Mais si l’élément est en position absolute et que marginTop est nul, top = offsetTop car dans ce cas la référence / le repère est le même (c'est le premier parent positionné (offsetParent)). Mais je ne sais pas si il y a des exceptions...

- Si l’élément est en position relative top et offsetTop sont différents même si marginTop est nul, ce qui est normal car dans ce cas la référence / le repère n'est plus le même...

Ah oui je crois que offsetTop est en lecture seule mais top peut être fixé par CSS ou JS...
21/02/2018, 15h56
Invité
En utilisant

Code:

box-sizing:border-box;

normalement, ça devrait aller : les border et margin ne sont plus pris en compte dans la définition des largeurs (et à priori des hauteurs aussi).
- CSS - box-sizing
Citation:

border-box indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur.
Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire.
Cela permet généralement de simplifier le dimensionnement des éléments.
21/02/2018, 16h30
Beginner.

Ah merci, c'est intéressant...

Je trouvais justement que c'était un prise de tête, avant je pensais que height/width étaient les dimensions de l’élément c-à-d la borderBox pour moi mais en fait ce sont celles de la contentBox...

Ah le CSS et moi...
01/03/2018, 16h24
Beginner.

Citation:

Envoyé par Beginner.

Enfin j'ai testé sur Chrome :

1- Tous les offset (offsetTop, offsetLeft, offsetHeight...) semblent concerner la borderBox (et non la marginBox) et c'est pareil pour getBoundingClientRect().

La différence entre les offsets et getBoundingClientRect() c'est la référence / le repère :

- la position avec les offsets (offsetTop et offsetLeft) est relative au premier parent positionné (offsetParent).
- Alors qu'avec getBoundingClientRect() (top et left) elle est relative au viewport...

A l'occassion de ce code #10 j'ai remarqué une différence de repère selon les navigateurs pour offsetLeft (et je suppose que c'est aussi le cas pour offsetTop) : le repérage se fait bien par rapport au premier parent positionné (offsetParent) mais plus précisément il semble que pour FF le repère c'est la borderBox du premier parent positionné (offsetParent) alors que pour Chrome c'est la paddingBox...

Ah CSS, décidément, je comprends de mieux en mieux pourquoi lui et moi ça fait deux...

Il me fait perdre tellement de temps, à quoi peut-on se fier, à quoi servent ces propriétés si leur comportement diffère d'un navigateur à l'autre... Cela diminue fortement (voir ça annule) l’intérêt de ces propriétés même pire elles sont nuisibles car on croit qu'on peut les utiliser sans problème alors que ce n'est pas le cas...

Voilà c'est mon coup de gueule...
01/03/2018, 17h18
Invité

bonjour,

ce ne sont pas forcément ces propriétés qui varient d'un navigateur à l'autre.

PAR CONTRE, chaque navigateur peut avoir une configuration "par défaut" (si on n'ajoute rien) différente des autres.

Par exemple, pour les margin/padding du <body>, des <ul>, <li>,....

Par conséquent :

1- il faut toujours indiquer le doctype

Code:

<!DOCTYPE html>

2- on peut faire un "reset" des propriétés par défaut, avec, notamment, au début du fichier CSS :

Code:

* { margin:0; padding:0; border:0; box-sizing:border-box; font-size:100%; }
01/03/2018, 18h02
Beginner.

Salut,

Merci oui tu as raison c'est une bonne remarque que j'avais mis du temps à découvrir pour régler certaines différences ici : #8.

J'ai ajouté ton reset mais cela n'a pas réglé le problème que j’évoque, je vais encore regarder...

Bonjour,
surprenant, il ne me semble pas avoir déjà rencontré un problème similaire.

Voilà un petit fichier de test, il suffit de modifier différents paramètres et de tester avec plusieurs navigateurs.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test dimensions</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1817923">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
  position: relative;
}
body {
  cursor: crosshair;
}
main, #main {
  display: block;
/*  margin: 0 auto;/* pas pour cette page */
  margin: 0 1em;
  max-width: 60em;
}
h1, h2, h3 {
  color: #069;
  margin: .5em 0;
}
section {
  padding: 0 1em;/**/
  position: relative;/**/
}
#div-test {
  width: 10em;
  height: 10em;
  border: 10px solid #ABC;
  margin-left:11em;
  box-sizing: border-box;/**/
}
.border {
  box-sizing: border-box;/**/
  border: 1px dotted #888;
}
.row {
  display: flex;
}
p {
  font-style: italic;
}
ul {
  font-size: .9em;
}
li span {
  display: inline-block;
  min-width: 7em;
}
#pos-mouse {
  position: fixed;
  right: .5em;
  top: 0;  
  color: #00F;
  font-family: "Courier New";
}
</style>
</head>
<body>
<main>
  <h1>Récupération valeurs</h1>
  <section class="border">
    <h2>L'objet</h2>
    <div id="div-test"></div>
  </section>
  <section class="row">
    <div>
      <h2>Offset-Client</h2>
      <p>Position par<br> rapport premier parent positionné</p>
      <ul id="r-offset"></ul>
    </div>
    <div>
      <h2>ClientRect</h2>
      <p>Position par<br> rapport au viewport</p>
      <ul id="r-bound"></ul>
    </div>
  </section>
</main>
<pre id="pos-mouse"></pre>
<script>
function getDimensions() {
  var oElem = this;
  var caract = "offsetLeft, offsetTop, offsetHeight, offsetWidth, offsetParent, clientLeft, clientTop, clientHeight, clientWidth";
  var data = caract.split(",");
  var oRect = oElem.getBoundingClientRect();
  
  var html = [""];
  var i;
  var nb = data.length;
  for (i = 0; i < nb; i += 1) {
    html.push("<span>" + data[i].trim() + "</span>: " + oElem[data[i].trim()]);
  }
  document.querySelector("#r-offset").innerHTML = html.join("<li>");
 
  html = [""];
  for (i in oRect) {
    if (!isNaN(oRect[i])) {
      html.push("<span>" + i + "</span>: " + oRect[i]);
    }
  }
  document.querySelector("#r-bound").innerHTML = html.join("<li>");
}
var oElem = document.querySelector("#div-test");
oElem.onclick = getDimensions;
getDimensions.apply(oElem);
// affiche position curseur sur document
document.onmousemove = function (ev) {
  document.querySelector("#pos-mouse").textContent = "x : " +ev.pageX+"/"+ev.clientX +"\ny : " +ev.pageY +"/" +ev.clientY;
};
</script>
</body>
</html>

[EDIT] mise à jour du code

01/03/2018, 21h55
Beginner.

Merci. un code intéressant...

J'ai juste fait le test sans rentrer trop dans le code pour l'instant...

Pour l'instant il y a plusieurs différences ff à gauche etChrome à droite :

EDIT : supprimé, regardez le message suivant...
01/03/2018, 22h20
Beginner.

Ah non je viens de voir une erreur de frappe dans ton code il y a deux fois <style> en corrigeant les chiffres changent mais certains restent différents dans certains cas...

http://nsa39.casimages.com/img/2018/...2117770195.png

Ensuite en mettant section à position: relative :

http://nsa39.casimages.com/img/2018/...1834977434.png

Là on voit des différences par rapport au viewport les deux différent et opera donne aussi des valeurs différentes...

EDIT : Ah non dans ce deuxième cas c'est normal que celles qui diffèrent différent puisque cela dépend de la taille de la fenêtre...
01/03/2018, 22h49
Beginner.

Bon pour tester ce dont je parlais il fallait aussi ajouter une bordure au premier parent positionné, je l'ai fait et il n'y a pas de différences entre les navigateurs avec le code de NoSmoking...

On pourrait être content de cela mais non car pour moi ça confirme la difficulté : c'est pire puisque les différences ne se voient pas toujours, elles sont difficiles à repérer donc c'est plus grave c'est encore plus trompeur...

Oui parce que j'ai un code où on voit ces différences...
02/03/2018, 00h11
Beginner.

Citation:

Envoyé par Beginner.

Oui parce que j'ai un code où on voit ces différences...

J'ai modifié le code en question pour mettre mieux en évidence le problème... Et j'ai découvert que dans ce cas précis c'est le css box-sizing: border-box; qui semble causer le problème, j'ai ajouté un bouton pour tester la différence avec les deux valeurs de box-sizing...

Au début avec FF on a :

curseur.offsetLeft/offsetTop: 30 | -4
curseur.left/top: 0 | -5

et quand on clique une première fois sur le bouton "change border-box" on a :

curseur.offsetLeft/offsetTop: 0 | -5
curseur.left/top: 0 | -5

Sur Chrome on dans les deux cas :

curseur.offsetLeft/offsetTop: 0 | -5
curseur.left/top: 0 | -5

Et bien sûr si vous bougez le curseur sur FF il y a toujours une différence de 30 entre left et offsetLeft et de 0 sur chrome...

Voici le code : http://jsbin.com/qizupitila/1/edit?html,css,js,output

EDIT : même problème si dans le code de NoSmoking on ajoute une bordure à section + box-sizing: border-box;
02/03/2018, 00h12
psychadelic

c'est pour cette raison qu'on utilise [tous] un reset css.
tous les frameworks utilisent un reset css : bootstrap, Materialize CSS, Foundation, KNACSS....
02/03/2018, 00h21
Beginner.

Merci pour la réponse, c'est ce que disait jreaux62 mais j'ai appliqué son reset et ça ne fonctionne pas, je crois que le problème est ailleurs lis mon message précédent...

1 pièce(s) jointe(s)

:salut:

On ne mettra jamais parfaitement d'accord Chrome, Firefox et Edge !

Il y a longtemps que je me soucie plus du positionnement exact de chaque élément dans la page web, je fais confiance :

aux navigateurs dignes de ce nom,
à la mise en page Grid,
aux unités CSS rem ou pt,
et aux techniques "responsive",

pour que chaque navigateur offre un rendu plus ou moins similaire, sans jamais en espérer plus.

Ci-dessous l'image du résultat et le code de ma page web (j'utilise knacss.css).

Pièce jointe 356350

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<title>Test</title>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/knacss.min.css">
	<style>
                main {
                        padding: 0.3rem;
                }
                #div-test {
                        width: 10rem;
                        height: 10rem;
                        border: 2pt solid #ABC;
                        margin-left: 10rem;
                }
                .row {
                        display: flex;
                }
                p {
                        font-style: italic;
                }
                li span {
                        display: inline-block;
                        min-width: 7rem;
                }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.1.js"></script>
	<script>
    'use strict';
 
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
                        // code du test
                
                
                        // fin code du test
                        
                }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                                                                                                
                        let
                                data = "offsetLeft, offsetTop, offsetHeight, offsetWidth, clientLeft, clientTop, clientHeight, clientWidth".split(","),
                                oElem = document.querySelector("#div-test"),
                                oRect = oElem.getBoundingClientRect(),
                                html = [""];
                                
                        for ( const item of data ) {
                                html.push( "<span>" + item.trim() + "</span>: " + Math.round( oElem[ item.trim() ] ) );
                        }
                        
                        document.querySelector("#r-offset").innerHTML = html.join( "<li>" );
                        
                        html = [""];
                        
                        for ( const key in oRect ) {
                                if ( !isNaN( oRect[ key ] ) ){
                                        html.push( "<span>" + key + "</span>: " + Math.round( oRect[ key ] ) );
                                }
                        }
                        
                        document.querySelector( "#r-bound" ).innerHTML = html.join( "<li>" );
 
                        // fin code du test
                                                
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<h1>Récupération valeurs</h1>
		<section>
			<h2>L'objet</h2>
			<div id="div-test"></div>
		</section>
		<section class="row">
			<div>
				<h2>Offset-Client</h2>
				<p>Position par<br> rapport premier parent positionné</p>
				<ul id="r-offset"></ul>
			</div>
			<div>
				<h2>ClientRect</h2>
				<p>Position par<br> rapport au viewport</p>
				<ul id="r-bound"></ul>
			</div>
		</section>
 
	</main>
</body>
</html>

Citation:

Envoyé par Beginner.

dans ton code il y a deux fois <style> en corrigeant les chiffres ...

:oops: j'ai corrigé cela, copié dans la trame un peu rapide, le margin:0 auto sur le <main>, entre autre, pouvant fausser les résultats.

J'ai eu du mal à appréhender le soucis que tu décris mais j'ai effectivement vu dans ton exemple ce dont tu parles.

Le point le plus bizarre me semble être le fait que Chrome, ni IE ni Edge d'ailleurs, ne recalcule pas les offsets suivant le modèle de boîte du conteneur.
Quelque soit le modèle de boîte les offsets sont 0/-5 alors que sur FireFox on obtient des valeurs différentes.

FireFox
offsetLeft / offsetTop

Autres
offsetLeft / offsetTop

box-sizing: border-box
30 / -4

0 / -5
Les border et padding font partie de la boîte

box-sizing: content-box
0 / -5

0 / -5
Les border et padding sont exclus de la boîte

Il semblerait que FireFox ait une meilleur approche car le calcul est fait sur les bords pris en comptent suivant les modèles de boîte.

Il est vrai que cela peut prêter à grosses confuses :calim2:

Nota : le reset, ou non, n'est pas à l'origine de ce qui te préoccupe c'est plutôt le calcul/interprétation que font les navigateurs.

Il faudrait regarder si ces écarts se retrouvent lorsque tu calcules la position au survol.

02/03/2018, 16h26
psychadelic

Citation:

Envoyé par Beginner.

Merci pour la réponse et le lien, c'est ce que disait jreaux62 mais j'ai appliqué son reset et ça ne fonctionne pas, je crois que le problème est ailleurs lis mon message précédent...

Bien sur, et les différents reset CSS ne permettront jamais d'obtenir une présentation 100% identique d'un navigateur à l'autre, ni même sur un FireFox sous Mac ou sous Windows; mais juste d'éviter d'avoir des grosses surprises désagréables.

C'est un problème qui à toujours existé, une mise en page sous Word Mac et Word PC ne donnent pas la même chose, ni à l'écran et pas toujours à l'impression.
C'est pour cette raison que les logiciels de PAO avec le langage postscript ont tellement grossi, mais le problème reste toujours le même : suivant l'imprimeur que tu utilise,le rendu postscript peut être différent.

On peu aussi parler de couleurs, tous les écrans n'ont pas le même rendu sur les couleurs, ni toutes les encres non plus, et les écrans de haute qualité chromatique doivent régulièrement être recalibrés pour respecter - au mieux- les couleurs pantone.

Faudra t'y faire nous ne sommes que dans un monde d’approximation ou tout est relatif; même le wysiwyg est une utopie !

Voir 40 message(s) de cette discussion en une page

	FireFox offsetLeft / offsetTop	Autres offsetLeft / offsetTop
box-sizing: border-box	30 / -4	0 / -5	Les border et padding font partie de la boîte
box-sizing: content-box	0 / -5	0 / -5	Les border et padding sont exclus de la boîte