Vanilla JS - A toggleClass function

Developer
Joe Harry
Size
2,532 Kb
Views
24,288
  1. Vanilla JS - A toggleClass function Previews
  2. Vanilla JS - A toggleClass function HTML Codes
  3. Vanilla JS - A toggleClass function CSS Codes
  4. Vanilla JS - A toggleClass function JS Codes

How do I make an vanilla js - a toggleclass function?

What is a vanilla js - a toggleclass function? How do you make a vanilla js - a toggleclass function? This script and codes were developed by Joe Harry on 25 October 2022, Tuesday.

Vanilla JS - A toggleClass function Previews
IQ Test

Vanilla JS - A toggleClass function - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vanilla JS - A toggleClass function</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>An example function to toggle classes without needing jQuery.</p>
<div id="sqr" class="square">Click me to toggle</div>
<p id="current-classes">squares current classes: </p> <script src="js/index.js"></script>
</body>
</html>

Vanilla JS - A toggleClass function - Script Codes CSS Codes

* { -webkit-transition: 0.2s; transition: 0.2s;
}
body { background-color: #333; color: rgba(255,255,255,0.75); height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-flow: column; flex-flow: column; text-align: center; font-family: Verdana, Futura, sans-serif;
}
p { max-width: 200px;
}
.square { width: 200px; height: 200px; cursor: pointer; line-height: 200px; box-shadow: 0 0 60px rgba(0,0,0,0.4); border-radius: 5px; background-color: #F5F5F5; color: rgba(0,0,0,0.75);
}
.large { width: 300px; height: 300px; line-height: 300px;
}
.amber { background-color: #FFC107;
}
.indigo { background-color: #3F51B5;
}

Vanilla JS - A toggleClass function - Script Codes JS Codes

//Our function to toggle classes without jQuery, it takes two parameters:
//1. The element to have a class toggled
//2. The name of the class we want to toggle
function toggleClass(el, _class) { //Check if the element exists, //& if it has the class we want to toggle if (el && el.className && el.className.indexOf(_class) >= 0) { //Element has the class, so lets remove it... //Find the class to be removed (including any white space around it) var pattern = new RegExp('\\s*' + _class + '\\s*'); //Replace that search with white space, therefore removing the class el.className = el.className.replace(pattern, ' '); } else if (el){ //Element doesn't have the class, so lets add it... el.className = el.className + ' ' + _class; } else { //Our element doesn't exist console.log("Element not found"); }
}
var square = document.getElementById("sqr"), body = document.body, text = document.getElementById("current-classes");
//decorational.. show current classes
text.innerHTML = "squares current classes: <code>'" + square.className + "'</code>";
//on click toggle some classes
square.addEventListener("click", function(){ toggleClass(body, 'indigo'); toggleClass(square, 'amber'); toggleClass(square, 'large'); //decorational.. show current classes text.innerHTML = "squares current classes: <code>'" + square.className + "'</code>";
});
Vanilla JS - A toggleClass function - Script Codes
Vanilla JS - A toggleClass function - Script Codes
Home Page Home
Developer Joe Harry
Username woodwork
Uploaded October 25, 2022
Rating 3
Size 2,532 Kb
Views 24,288
Do you need developer help for Vanilla JS - A toggleClass function?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joe Harry (woodwork) Script Codes
Name
Samsung TV Loader
Expanding Contact Form
That Morning Coffee Feeling
Typophile
Long Live Ziggy Stardust
Video Loading
Stronger Together
100
TTMM Pebble Clock
Loading Christmas...
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!