Run results for: Toggle Classses

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3489.0 Safari/537.36

Browser: Chrome 69

Operating system: Mac OS X 10.13.5

Device Platform: Desktop

Date tested: 6 years ago

Test name	Executions per second
Toggle	4788.1 Ops/sec
ClassName + remove	1904.5 Ops/sec
My way	1740.6 Ops/sec

HTML Preparation code:

<!DOCTYPE html>
<html>
<head>
	<title>Color Changer</title>
	<style type="text/css">
		.purple {
			background: purple;
		}
	</style>
</head>
<body>
	<button>CLICK ME!</button>
	<script type="text/javascript" src="exercise1.js"></script>
</body>
</html>

Tests:

Toggle
document.querySelector("button").addEventListener("click", function(){ document.body.classList.toggle("purple") });
ClassName + remove
document.querySelector("button").addEventListener("click", function(){ document.body.className = "purple" document.body.classList.remove = "purple" });
My way
var isWhite = true; document.querySelector("button").addEventListener("click", function (){ if (isWhite){ document.body.style.background = "purple"; } else { document.body.style.background = "white"; } isWhite = !isWhite; });

Run results for: Toggle Classses

Toggle

ClassName + remove

My way