getComputedStyle

by Berat Emre NebioÄźlu

HTML

<div id="box1">
 <div id="box2">
  <div id="box3">
   <div id="box4">
   </div>
  </div>
 </div>
</div>

<div class="resultBox1">

</div>
<div class="resultBox2">

</div>
<br>
<div class="resultBox3">

</div>
<div class="resultBox4">

</div>

CSS

body{
  font-size:24px;
  
}

#box1
{
width:500px;
height:500px;
border:1px solid black;
margin:5px;
padding:5px;
}
#box2
{
width:80%;
height:80%;
border:1px solid black;
margin:2%;
padding:2%;
}
#box3
{
width:80%;
height:80%;
border:1px solid black;
margin:2%;
padding:2%;
}
#box4
{
width:80%;
height:80%;
border:1px solid black;
margin:2%;
padding:2%;
}
.resultBox1, .resultBox2, .resultBox3, .resultBox4   
{
  border:1px solid black;
  margin-top:10px;
  padding:10px;
}

JavaScript

var br = document.createElement('br');
var box1 = document.querySelector("#box1");
var style1 = window.getComputedStyle(box1, null);
var result1 = document.querySelector('.resultBox1');
result1.innerHTML += "width of box1: " + style1.width + "<br>"
result1.innerHTML += "height of box1: " + style1.height + "<br>";
result1.innerHTML += "margin-top of box1: " + style1.marginTop + "<br>";
result1.innerHTML += "margin-bottom of box1: " + style1.marginBottom + "<br>";
result1.innerHTML += "margin-left of box1: " + style1.marginLeft + "<br>";
result1.innerHTML += "margin-right of box1: " + style1.marginRight + "<br>";
result1.innerHTML += "padding-top of box1: " + style1.paddingTop + "<br>";
result1.innerHTML += "padding-bottom of box1: " + style1.paddingBottom + "<br>";
result1.innerHTML += "padding-left of box1: " + style1.paddingLeft + "<br>";
result1.innerHTML += "padding-right of box1: " + style1.paddingRight;
var box2 = document.querySelector("#box2");
var style2 = window.getComputedStyle(box2, null);
var result2 = document.querySelector('.resultBox2');
result2.innerHTML += "width of box2: " + style2.width + "<br>"
result2.innerHTML += "height of box2: " + style2.height + "<br>";
result2.innerHTML += "margin-top of box2: " + style2.marginTop +  "<br>";
result2.innerHTML += "margin-bottom of box2: " + style1.marginBottom + "<br>";
result2.innerHTML += "margin-left of box2: " + style2.marginLeft +  "<br>";
result2.innerHTML += "margin-right of box2: " + style2.marginRight + "<br>";
result2.innerHTML += "padding-top of box2: " + style2.paddingTop + "<br>";
result2.innerHTML += "padding-bottom of box2: " + style2.paddingBottom + "<br>";
result2.innerHTML += "padding-left of box2: " + style2.paddingLeft + "<br>";
result2.innerHTML += "padding-right of box2: " + style2.paddingRight + "<br>";
var box3 = document.querySelector("#box3");
var style3 = window.getComputedStyle(box3, null);
var result3 = document.querySelector('.resultBox3');
result3.innerHTML+= "width of...