<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
.mystyle2 {
width: 100%;
padding: 25px;
background-color: green;
color: yellow;
font-size: 25px;
box-sizing: border-box;
}
.mystyle3 {
width: 100%;
padding: 25px;
background-color: blue;
color: yellow;
font-size: 25px;
box-sizing: border-box;
}
.mystyle4 {
width: 100%;
padding: 25px;
background-color: yellow;
color: black;
font-size: 25px;
box-sizing: border-box;
}
.mystyle5 {
width: 100%;
padding: 25px;
background-color: gold;
color: black;
font-size: 25px;
box-sizing: border-box;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p>
<Button Onclick="Myfunction()">Try It</Button>
<button id="xxx" onclick="myFunction2()">Blue</button>
<button id="yyy" onclick="myFunction3()">Yellow</button>
<button id="aaa" onclick="myFunction5()">Gold</button>
<div id="myDIV" class="mystyle">
This is a DIV element.
</div>
<div id="myDIV2" class="mystyle2">
This is a DIV2 element.
</div>
<div id="myDIV3" class="mystyle3">
This is a DIV3 element.
</div>
<div id="myDIV4" class="mystyle3">
This is a DIV4 element.
</div>
<script>
function myFunction() {
var element = document.getElementById("myDIV");
alert(element.className);
if (element.className=="mystyle2"){
alert(1);
element.classList.toggle("mystyle");
}
else
element.classList.toggle("mystyle2");
}
function myFunction2() {
if (document.getElementById("xxx").innerHTML=="Blue")
{ document.getElementById("xxx").innerHTML="Green"
document.getElementById("myDIV2").className="mystyle3"
}
else
{ document.getElementById("xxx").innerHTML="Blue"
document.getElementById("myDIV2").className="mystyle2"
}
}
function myFunction3() {
if (document.getElementById("yyy").innerHTML=="Yellow")
{ document.getElementById("yyy").innerHTML="Blue"
}
else
{ document.getElementById("yyy").innerHTML="Yellow"
}
var element = document.getElementsByClassName("mystyle3");
for(var i = 0; i < element.length; i++){
element[i].classList.toggle("mystyle4")
}
}
function myFunction5() {
txt=document.getElementById("aaa").innerHTML
switch(txt) {
case 'Gold': txt="Yellow"
break;
case 'Yellow': txt="Blue" ; break;
case 'Blue': txt="Gold" ; break;
default: beark; }
document.getElementById("aaa").innerHTML=txt;
var element = document.getElementsByClassName("mystyle3");
for(var i = 0; i < element.length; i++){
if (txt=="Yellow"){
element[i].classList.remove("mystyle4")
element[i].classList.toggle("mystyle5")
}
else
if (txt=="Blue") {
element[i].classList.remove("mystyle5")
element[i].classList.toggle("mystyle4")
}
else
if (txt=="Gold"){
element[i].classList.remove("mystyle4")
element[i].classList.toggle("mystyle2");
}
}
}
</script>
</body>
</html>
All unicode symbols
Unicode Symbols 2
Unicode symbols 3
