<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Toggle class</title>
<style>
.my-button1 {
width: 48px;
height: 48px;
}
.my-button2 {
width: 148px;
height: 148px;
}
</style>
<script>
let state = 1;
function func1(){
let elem = document.getElementById("mybutton").value = "hello";
if ( state == 1){
document.getElementById("mybutton").className = "my-button2";
state = 0;
}
else
{
state = 1;
document.getElementById("mybutton").className = "my-button1";
}
}
</script>
</head>
<body>
<input type="button" id="mybutton" class="my-button1" value="+" onclick="func1()">
</body>
</html>
| 