Example with buttons

by Megi93

HTML

<div id='myDiv' class="square"></div>
<button>Display id</button>

<button>Display classes</button>
<button>Color red</button>
<button>Toggle visibility</button>

<p id="demo"></p>

CSS

.square {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    border: 1px solid grey;
    border-radius: 5px;
}

.hidden {
    visibility: hidden;
}

.red {
    background-color: red;
}

JavaScript

var btn = document.querySelectorAll("button"),
	div = document.querySelector("div");

// display id
btn[0].addEventListener("click", function() {
	console.log(div.id);
});

// Element.classList stores all classes of the element in the form of a DOMTokenList.
var classes = div.classList;

//display classes for div
btn[1].addEventListener("click", function() {
	console.log(classes);
});

btn[2].addEventListener("click", function() {
	document.querySelector("#myDiv").classList.add("red");
});

btn[3].addEventListener("click", function() {
	// You can also toggle a class on and off
    classes.toggle("hidden");
})