JQuery - change css

Developer
Tyler Lesperance
Size
2,154 Kb
Views
42,504
  1. JQuery - change css Previews
  2. JQuery - change css HTML Codes
  3. JQuery - change css CSS Codes
  4. JQuery - change css JS Codes

How do I make an jquery - change css?

What is a jquery - change css? How do you make a jquery - change css? This script and codes were developed by Tyler Lesperance on 24 November 2022, Thursday.

JQuery - change css Previews
IQ Test

JQuery - change css - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery - change css</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Click the box once to proceed</h1>
<div id="the-box" class="bad">The box</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery - change css - Script Codes CSS Codes

body { background: #D2D2D2;
}
h1 { margin: 1rem 0 1rem 3rem; text-transform: uppercase; font-family: 'Helvetica'; color: #292929;
}
div { width: 35rem; height: 8rem; line-height: 4; display: block; text-align: center; font-size: 2rem; color: #000; text-decoration: none; text-transform: uppercase; padding: 0.25rem; margin: 2rem auto; cursor: pointer; border: 2px solid #292929;
}
.good { background: #185901;
}
.bad { background: #980101; color: #FFF;
}

JQuery - change css - Script Codes JS Codes

// This time let's not only change the classes, but also change the css of the box with jQuery
$('#the-box').click(function () { // Using an if statement to check the class if ($(this).hasClass('bad')) { // The box that we clicked has a class of bad so let's remove it and add the good class $(this).removeClass('bad'); $(this).addClass('good'); // Let's also make this box a lot smaller $(this).css('width','10rem'); } else { // The user obviously can't follow instructions so let's alert them of what is supposed to happen next alert("You can proceed!"); }
});
JQuery - change css - Script Codes
JQuery - change css - Script Codes
Home Page Home
Developer Tyler Lesperance
Username tylerama
Uploaded November 24, 2022
Rating 3
Size 2,154 Kb
Views 42,504
Do you need developer help for JQuery - change css?

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!

Tyler Lesperance (tylerama) Script Codes
Name
Vanilla JS - click event
JQuery - add and remove a class
Simple loading animation
My Favorite Hamburger
A Pen by Tyler Lesperance
Vanilla - DOM Loaded
JQuery - animate
FLIP animation inspired by Paul Lewis
JQuery - click event
JQuery - getting and setting href
Create amazing blog posts 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!