JavaScript Test : computed Style

Using window.getComputedStyle(xx,xx)

by JS Test

HTML

<script src="https://getfirebug.com/firebug-lite.js"></script>
<h1 id="h1">
Computed Style
</h1>
<p class="normal" id="p1">
  THis is paragraph 1
</p>
<p>
  This is paragraph 2
</p>
<input type="button" id="toggleBtn" value="Toggle color">

CSS

h1 {
  color: red;
  font-size: 24pt;
  font-style: italic
}

body {
  background-color: black
}

.normal {
  color: blue;
  font-size: 15;
  font-family: Arial
}

.visible {
  display: none
}

.white {
  color: white
}

JavaScript

/***
//1. What things will return of .getComputedStyle
var p1 = document.getElementById("p1");
var computedStyle = window.getComputedStyle(p1);
console.log(computedStyle);
***/

///**2. toggle color
function toggleVis() {
  var p1 = document.getElementById("p1");
  var classList = p1.classList;
  classList.toggle("white");
  
  var computedStyle = window.getComputedStyle(p1);
  var style = computedStyle.getPropertyValue("color");
  console.log(style);
}

var el = document.getElementById("p1");
var computedStyle = window.getComputedStyle(el);
var style = computedStyle.getPropertyValue("color");
console.log(style);

document.getElementById("toggleBtn").onclick = toggleVis;
//**/