JavaScript Test : Manipulate CSS via DOM

Using 'classList' property, 'toggle' method, Define class in CSS

by JS Test

HTML

<script src="https://getfirebug.com/firebug-lite.js"></script>
<h1>
Css Test Document
</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

function toggleVis(){
	var div=document.getElementById("p1");
  var classList=div.classList;
  classList.toggle("white");
}

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