up

2-ui/1-document/11-coordinates/head.html

@@ -0,0 +1,27 @@
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+
+  document.getElementById('coords-show-mark').onclick = function() {
+    let elem = document.getElementById("coords-show-mark");
+
+    function createMessageUnder(elem, text) {
+      let coords = elem.getBoundingClientRect();
+      let message = document.createElement('div');
+      message.style.cssText = "position:fixed; color: red";
+
+      message.style.left = coords.left + "px";
+      message.style.top = coords.bottom + "px";
+
+      message.innerHTML = text;
+
+      return message;
+    }
+
+    let message = createMessageUnder(elem, 'Hello, world!');
+    document.body.append(message);
+    setTimeout(() => message.remove(), 5000);
+  }
+
+});
+
+</script>