Viewing: ja.javascript.info

JavaScript :

() /
/

: getBoundingClientRect

elem.getBoundingClientRect() elem :

top Y-,
left X-,
right X-,
bottom Y-.

[]

style.position.left/top
elem elem.getBoundingClientRect().top
Chrome getBoundingClientRect width height : height=bottom-top, width=right-left

CSSposition:fixed

CSS right bottom

JavaScript

elementFromPoint(x, y)

document.elementFromPoint(x, y) (x, y)

let elem = document.elementFromPoint(x, y);

let centerX = document.documentElement.clientWidth / 2;
let centerY = document.documentElement.clientHeight / 2;

let elem = document.elementFromPoint(centerX, centerY);

elem.style.background = "red";
alert(elem.tagName);

document.elementFromPoint(x,y) (x,y)

/null

          let elem = document.elementFromPoint(x, y);
// elem = null
elem.style.background = ''; // !
        

position:fixed

CSS left/top ( right/bottom) position:fixed

getBoundingClientRect

createMessageUnder(elem, html) elem :

          let elem = document.getElementById("coords-show-mark");

function createMessageUnder(elem, html) {
  // 
  let message = document.createElement('div');
  // CSS
  message.style.cssText = "position:fixed; color: red";

  // , "px" !
  let coords = elem.getBoundingClientRect();

  message.style.left = coords.left + "px";
  message.style.top = coords.bottom + "px";

  message.innerHTML = html;

  return message;
}

// :
// 
let message = createMessageUnder(elem, 'Hello, world!');
document.body.append(message);
setTimeout(() => message.remove(), 5000);
        

id=coords-show-mark ,

CSS

: position:fixed

position:absolute

CSS position:fixed position:absolute

position:absolute top/left

(clientX,clientY) (pageX,pageY)

[]

(clientX,clientY) (pageX,pageY)

[]

"From today's featured article" clientY 0
clientX
pageX pageY

pageY = clientY +
pageX = clientX +

getCoords(elem) elem.getBoundingClientRect() :

          // 
function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };
}
        

elem.getBoundingClientRect()
elem.getBoundingClientRect() +

position:fixed position:absolute

CSS position absolute fixed

iframe

JavaScript

DOM :

()
()
()
()

P.S.

elem.getBoundingClientRect()

answer1 answer2 :

          let coords = elem.getBoundingClientRect();

let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];
        

clientLeft/clientTop :

let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];

CSS :

          let answer4 = [
  coords.right - parseInt(getComputedStyle(field).borderRightWidth),
  coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];
        

clientWidth/clientHeight :

          let answer4 = [
  coords.left + elem.clientLeft + elem.clientWidth,
  coords.top + elem.clientTop + elem.clientHeight
];
        

(absolute)

(absolute) : positionAt(anchor, position, elem) anchor elem

position :

top-out, right-out, bottom-out elem anchor //
top-in, right-in, bottom-in anchor elem : //

          // blockquote 
positionAt(blockquote, "top-out", note);

// blockquote 
positionAt(blockquote, "top-in", note);
        

(absolute)