es.javascript.info/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html at 1262db87fbbb853e0e3d6d23940d4f1422c8d687 · maksumi/es.javascript.info · GitHub

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
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
  <script>
    document.onclick = function(e) { // shows click coordinates
      coords.innerHTML = e.clientX + ':' + e.clientY;
    };
  </script>
</head>

<body>

  Haz click en cualquier lugar para obtener las coordenadas de la ventana.
  <br> Esto es útil para testear y confirmar el resultado que obtuviste con JavaScript.
  <br>
  <div id="coords">(Las coordenadas del click se mostrarán aquí)</div>


  <div id="field">
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  </div>


  <div class="triangle-right" style="left:-20px;top:-176px">1</div>
  <div class="triangle-right" style="left:-10px;top:-178px">3</div>
  <div class="triangle-right" style="left:190px;top:-40px">4</div>
  <div class="triangle-right" style="left:200px;top:-42px">2</div>

  <script>
    let fieldCoords = field.getBoundingClientRect();

    let answer = [
      [ // 1
        fieldCoords.left,
        fieldCoords.top
      ],
      [ // 2
        fieldCoords.right,
        fieldCoords.bottom
      ],
      [ // 3
        fieldCoords.left + field.clientLeft,
        fieldCoords.top + field.clientTop
      ],
      [ // 4
        fieldCoords.left + field.clientLeft + field.clientWidth,
        fieldCoords.top + field.clientTop + field.clientHeight
      ]
    ];

    alert(answer.join('  '));
  </script>

</body>
</html>