change elements class javascript
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
{
document.getElementById("MyElement").classList.toggle('MyClass');
}javascript change element class
//Overwrite all classes
element.className = "class";
//Add class
element.classList.add("class");dynamically change css class with javascript
document.getElementById('idOfElement').classList.add('newClassName');change class javascript
Syntax:
document.getElementById('myElement').className = "myclass";
<html>
<head>
<title>Change class of an element with javascript</title>
<style type="text/css">
.redbutton{
background-color: red;
}
.greenbutton{
background-color: green;
}
</style>
<script type="text/javascript">
function changeClass() {
document.getElementById('clickme').className = "greenbutton";
var new_class = document.getElementById('clickme').className;
document.getElementById('classChange').innerHTML = "New Class Name : "
+ new_class;
}
</script>
</head>
<body>
<button class="redbutton" id="clickme" onclick="changeClass()"
>Change Class</button><br>
<p id="classChange">Class Name: redbutton</p>
</body>
</html>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
