css units

by Berat Emre Nebioğlu

HTML

<div class="container">
something
    <div class="subContainer">
    other thing
    
    </div>
</div>
<div class="result">

</div>

CSS

*{
  font-size:12px;
}
.container {
         max-width: 400px;
       margin-left: auto;
       margin-right: auto;
   
       color:blue;
}
.subContainer {
       width: 80%;
       margin-left: auto;
       margin-right: auto;
       font-size:3rem;
       color:red;
}

JavaScript

var body = document.querySelector(".body");
var container = document.querySelector(".container");
var subContainer = document.querySelector(".subContainer");
var style1 = window.getComputedStyle(container, null);
var style2 = window.getComputedStyle(container, null);
var style3 = window.getComputedStyle(subContainer, null);
var result = document.querySelector('.result');
/*result.innerHTML += "width of body: " + style1.width + "<br>";
result.innerHTML += "width of container: " + style2.width + "<br>";
result.innerHTML += "width of sub container: " + style3.width + "<br>";*/
result.innerHTML += "font of container: " + style2.fontSize + "<br>";
result.innerHTML += "font of sub container: " + style3.fontSize + "<br>";