Quelle fonction est la plus sûre ?

**patricktoulon** · 07/03/2018, 11h49

Bonjour a tous

je continue dans mon apprentissage et aujourd'hui je teste deux petite fonction

je voudrais simplement savoir la quelle vous utiliseriez ,la quelle est la plus sur ??

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="test getBoundingDocumentRect 1 et 2">
  <title>test patrick 242 </title>
<style>
</style>
<script  type= "text/javascript">
function calcule(event) {
        var r = document.getElementById("conteneur1");
        var position = getBoundingDocumentRect2(event);
        var positionrect = getBoundingDocumentRect(event)
        console.log("avec getBoundingDocumentRect2 " + position.left + "px");
        console.log("avec getBoundingDocumentRect " + positionrect.left + "px");
}
function getBoundingDocumentRect(event,element) {
        if (element===undefined){// au cas ou l'evenement click aurais été attacher avec addEventlistener
            element=event.target;
        }
        var rect = element.getBoundingClientRect();
        return {
                "left": rect.left + document.documentElement.scrollLeft + document.body.scrollLeft,
                "right": rect.right + document.documentElement.scrollLeft + document.body.scrollLeft,
                "top": rect.top + document.documentElement.scrollTop + document.body.scrollTop,
                "bottom": rect.bottom + document.documentElement.scrollTop + document.body.scrollTop
        };
}
//pour la fonction
function getBoundingDocumentRect2(event,element) {
 
        if (element===undefined){// au cas ou l'evenement click aurais été attacher avec addEventlistener
            element=event.target;
        }
 
        var memo = element;
        var oLeft = 0;
        var oTop = 0;
        while (element) {
                oLeft += element.offsetLeft;
                oTop += element.offsetTop;
                element = element.offsetParent;
        }
        return {
                "left": oLeft,
                "top": oTop,
                "right": oLeft += memo.offsetWidth,
                "bottom": oTop += memo.offsetHeight
        };
}
</script>
 
</head>
<body>
<div id="conteneur1" style="position:absolute;left:1300px;top:1px;height:200px;width:350px;border:2px solid red;" onclick="calcule(event);">
 
</div>
 
 
</body>
</html>

merci pour les retours et de votre patience je pense notament a psychadelic dont je prends entierement a ma charge la responsabilité de son etat dépréssif

**Beginner.** · 07/03/2018, 16h23

Salut,

Sujet épineux... Les deux fonctions sont différentes, j'ai ouvert deux fils qui pourrait t’intéresser :

- top, offsetTop et getBoundingClientRect().top

- offsetTop : propriété fiable ou pas ?

...
Pourquoi utilises-tu documentElement.scrollLeft + document.body.scrollLeft et document.documentElement.scrollTop + document.body.scrollTop, est-ce utile ?

**patricktoulon** · 07/03/2018, 16h49

re
bonjour beguinner
oui je pense que c'est utilse non? avec l'un ou lautre et les deux ca donne pas la meme chose selon le scroll du windows et d'un eventuel element parent du style div overflow
je vais voir tes posts

**patricktoulon** · 07/03/2018, 17h05

re
bon au final dans 2d post tu y repond en fait, c'est bien getBoundingclientrect() qui est le plus sur tout du moins avec le quel les explorateurs FF,IE,CHROME sont d'accords

d'ailleurs j'aurais du m'enrendre compte la ou le do while offset me donne 1300px le getboudingclientrect + les scrolls me donne 1299,5xxxxx en gros 1 demie pixel ce qui correspond a la moitié de la bordure a peu pres
je garderais donc
celle la pour chopper le left top a partir du document +scroll

quoi que des fois je suis au dessus

Nom : demo2.gif
Affichages : 235
Taille : 384,3 Ko

Nom : demo2.gif
Affichages : 235
Taille : 384,3 Ko

**Beginner.** · 07/03/2018, 18h04

Il y a aussi window.pageXOffset/window.pageYOffset ou window.scrollX/Window.scrollY...

Ici : https://developer.mozilla.org/fr/doc...Window/scrollX il y a aussi ce passage pour un cross-browser :

La propriété pageXOffset revient à la propriété scrollX :

window.pageXOffset == window.scrollX; // Toujours vrai (true)

For cross-browser compatibility, use window.pageXOffset instead of window.scrollX. Additionally, older versions of Internet Explorer (< 9) do not support either property and must be worked around by checking other non-standard properties. A fully compatible example:

var x = (window.pageXOffset !== undefined)
? window.pageXOffset
: (document.documentElement || document.body.parentNode || document.body).scrollLeft;

var y = (window.pageYOffset !== undefined)
? window.pageYOffset
: (document.documentElement || document.body.parentNode || document.body).scrollTop;

Quelle fonction est la plus sûre ?

JavaScript

Discussions similaires

Partager

Partager