Viewing: zh.javascript.info

JavaScript

position:fixed/
- clientX/clientY
document root position:absolute /
- pageX/pageY

[]

pageY
clientY

getBoundingClientRect

elem.getBoundingClientRect() elem DOMRect

DOMRect

x/y X/Y
width/height width/height

derived

top/bottom / Y
left/right / X

y/top/bottom

elem.getBoundingClientRect()

[]

x/y width/height derived

left = x
top = y
right = x + width
bottom = y + height

10.5 style.left/top
elem elem.getBoundingClientRect().top

(x,y) (width,height)

width/height directed

width/height

width height width=-200height=-100

[]

left/top x/y

elem.getBoundingClientRect() width/height width/height

IE x/y

polyfill DomRect.prototype getter top/left width/height x/y elem.getBoundingClientRect()

window CSS position:fixed

CSS right bottom

JavaScript

elementFromPoint(x, y)

document.elementFromPoint(x, y) (x, y) the most nested

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)

width/height null

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

fixed

getBoundingClientRect CSS position left/top right/bottom

createMessageUnder(elem, html) elem

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

function createMessageUnder(elem, html) {
  //  message 
  let message = document.createElement('div');
  //  CSS class 
  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;
}

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

Button with id=coords-show-mark, the message will appear under it

CSS

message position:fixed

document position:absolute

CSS position:fixed position:absolute

position:absolute top/left

pageY = clientY +
pageX = clientX +

getCoords(elem) elem.getBoundingClientRect()

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

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

position:absolute

createMessageUnder

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

  let coords = getCoords(elem);

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

  message.innerHTML = html;

  return message;
}
        

elem.getBoundingClientRect()
elem.getBoundingClientRect()

position:fixed position:absolute

CSS position absolute fixed

iframe field

JavaScript

DOM

P.S. sizeborder

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];

border

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
];
        

note absolute

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

position

top-outright-outbottom-out elem anchor //
top-inright-inbottom-in elem anchor //

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

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

absolute note