Positioning and Sizing

by Clint

HTML

<h1>
Headline
</h1>
<div id="pinkBox">
  Pink Box
</div>
<p>
This is a paragraph.
</p>
<div id="blueBox">
  Blue Box
</div>


<div id="yellowBox">
  Yellow Box
</div>
<p>
And some more text. Lorem ipsum and alll that.
</p>
<div id="info">
  <h1>
    Info
  </h1>
  <select id="elSelect">
    <option>#pinkBox</option>
    <option>#yellowBox</option>
    <option>#blueBox</option>
    <option>body</option>
    </select>
  <table>
    <tr>
      <td>offsetHeight</td>
      <td id="lblOffsetHeight">?</td>
    </tr>
    <tr>
      <td>offsetWidth</td>
      <td id="lblOffsetWidth">?</td>
    </tr>
    <tr>
      <td>offsetLeft</td>
      <td id="lblOffsetLeft">?</td>
    </tr>
    <tr>
      <td>offsetTop</td>
      <td id="lblOffsetTop">?</td>
    </tr>
    <tr>
      <td>clientHeight</td>
      <td id="lblClientHeight">?</td>
    </tr>
    <tr>
      <td>clientWidth</td>
      <td id="lblClientWidth">?</td>
    </tr>
    <tr>
      <td>scrollHeight</td>
      <td id="lblScrollHeight">?</td>
    </tr>
     <tr>
      <td>scrollWidth</td>
      <td id="lblScrollWidth">?</td>
    </tr>
    <tr>
      <td>scrollLeft</td>
      <td id="lblScrollLeft">?</td>
    </tr>
    <tr>
      <td>scrollTop</td>
      <td id="lblScrollTop">?</td>
    </tr>
    <tr>
      <td colspan=2>
        <h2>
        
        getBoundingClientRect</h2>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>left</td>
      <td id="lblBoundingClientRectLeft">?</td>
    </tr>
    <tr>
      <td>top</td>
      <td id="lblBoundingClientRectTop">?</td>
    </tr>
        <tr>
      <td>height</td>
      <td id="lblBoundingClientRectHeight">?</td>
    </tr>
    <tr>
      <td>width</td>
      <td id="lblBoundingClientRectWidth">?</td>
    </tr>

  </table>
</div>

<h1>
Content
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pellentesque viverra blandit. In ultricies purus id lacus tempus condimentum. Nulla iaculis maximus lacus, et rutrum orci volutpat sed. Cras dictum sem a...

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,body {
  margin: 1rem;
  padding: 1rem;
}
html {
  background-color: white;
}
body {
  background-color: lightgray;
}
#info {
  position: fixed;
  border: 1px solid black;
  background-color: white;
  padding: 1rem;
  right: 0;
  top: 0;
}
#info h1, #info h2 {
  padding: 0;
}
#info h2 {
  font-size: 80%;
}
#pinkBox, #blueBox, #yellowBox {
  border: 1px solid black;
  padding: 1rem;
}
#yellowBox {
  background-color: lightyellow;
  position: fixed;
}
#blueBox {
  background-color: lightblue;
  float: left;
}
#pinkBox {
  background-color: pink;
}

JavaScript

const assign = (label, value) => {
	document.getElementById('lbl' + label).innerHTML = value;
}
const assignRect = (label, value) => {
 	document.getElementById('lbl' + label + 'Left').innerHTML = value.left;
  document.getElementById('lbl' + label + 'Top').innerHTML = value.top;
 	document.getElementById('lbl' + label + 'Width').innerHTML = value.width;
 	document.getElementById('lbl' + label + 'Height').innerHTML = value.height;

}

const rectString = (r) => {
	return `left ${r.left}<br /> top ${r.top}<br/> width ${r.width}<br> height ${r.height}`;
}

const compute = (el) => {
	assign('OffsetHeight', el.offsetHeight);
  assign('OffsetWidth', el.offsetWidth);
  assign('OffsetTop', el.offsetTop);
  assign('OffsetLeft', el.offsetLeft);
  assign('ClientHeight', el.clientHeight);
  assign('ClientWidth', el.clientWidth);
  
  assign('ScrollLeft', el.scrollLeft);
  assign('ScrollTop', el.scrollTop);
    
  assign('ScrollWidth', el.scrollWidth);
  assign('ScrollHeight', el.scrollHeight);
	assignRect('BoundingClientRect', el.getBoundingClientRect());

}

const update = () => {
	compute(document.querySelector(document.getElementById('elSelect').value));
}

document.getElementById('elSelect').addEventListener('change', () => {
	update();
})

setInterval(() => {
	update();
}, 1000);