JavaScript Cheet Sheet

2.2 - HTML Objects

The following example demonstrates some Layout Properties

// Code inside function is executed when the button is clicked
function showExample(){

   // para is a variable to hold the element with id = aParagraph
   let para = document.getElementById("aParagraph");

   // The color of aParagraph is changed to magenta
   para.style.color = "magenta";

   // Layout properties to be displayed in the elements with ID's example4x
   example4a.innerText = para.offsetWidth;
   example4b.innerText = para.offsetHeight;
   example4c.innerText = para.clientWidth;
   example4d.innerText = para.clientHeight;
   example4e.innerText = para.getBoundingClientRect;
}

para.offsetWidth =

para.offsetHeight =

para.clientWidth =

para.clientHeight =

para.getBoundingClientRect =