JQuery vs. Native JS: CSS Class Manipulation

Developer
Kyle Foster
Size
2,251 Kb
Views
22,264
  1. JQuery vs. Native JS: CSS Class Manipulation Previews
  2. JQuery vs. Native JS: CSS Class Manipulation HTML Codes
  3. JQuery vs. Native JS: CSS Class Manipulation CSS Codes
  4. JQuery vs. Native JS: CSS Class Manipulation JS Codes

How do I make an jquery vs. native js: css class manipulation?

A playground for testing jQuery CSS class manipulation versus its native counterparts. Note that this Pen accompanies my screencast found at http://youtu.be/8nqkclm9P_4. Feel free to watch and play along.. What is a jquery vs. native js: css class manipulation? How do you make a jquery vs. native js: css class manipulation? This script and codes were developed by Kyle Foster on 04 September 2022, Sunday.

JQuery vs. Native JS: CSS Class Manipulation Previews
IQ Test

JQuery vs. Native JS: CSS Class Manipulation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery vs. Native JS: CSS Class Manipulation</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> <div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/desandro/classie/master/classie.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery vs. Native JS: CSS Class Manipulation - Script Codes CSS Codes

body { background: #DDD; }
/* Default */
div { width: 400px; padding: 1em; background: #CCC; text-align: center; font-family: Courier; margin: 1em auto 0 auto;
}
div:before { content: 'div';
}
/* Maroon */
.maroon { color: linen; background: maroon;
}
.maroon:before { content: 'div.maroon';
}
/* Orange */
.orange { background: orange;
}
.orange:before { content: 'div.orange';
}

JQuery vs. Native JS: CSS Class Manipulation - Script Codes JS Codes

/** * CSS Class Manipulation Methods: * 1. Detect class * 2. Add class * 3. Remove class * 4. Toggle class */
/** * jQuery */
var div = $( 'div' );
// Detect class
var detectClass = div.hasClass( 'maroon' );
// Add class
div.addClass( 'orange' );
// Remove class
div.removeClass( 'orange' );
// Toggle class
div.on( 'click', function() { $( this ).toggleClass( 'maroon' );
});
/** * ClassList */
var div = document.querySelector( 'div' );
// Detect class
var detectClass = div.classList.contains( 'maroon' );
// Add class
div.classList.add( 'orange' );
// Remove class
div.classList.remove( 'orange' );
// Toggle class
div.addEventListener( 'click', function() { this.classList.toggle( 'maroon' );
}, false );
/** * Classie */
// Detect class
var detectClass = classie.has( div, 'maroon' );
// Add class
classie.add( div, 'orange' );
// Remove class
classie.remove( div, 'orange' );
// Toggle class
div.addEventListener( 'click', function() { classie.toggle( this, 'maroon' );
}, false );
JQuery vs. Native JS: CSS Class Manipulation - Script Codes
JQuery vs. Native JS: CSS Class Manipulation - Script Codes
Home Page Home
Developer Kyle Foster
Username hkfoster
Uploaded September 04, 2022
Rating 3
Size 2,251 Kb
Views 22,264
Do you need developer help for JQuery vs. Native JS: CSS Class Manipulation?

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!

Kyle Foster (hkfoster) Script Codes
Name
Colored Single-Element Sections
Gradual.js
Rumble on Hover
Cattywompus - A Subtle Parallax Banner Plugin
Super Simple Fader
Askew - A Subtle Parallax Banner Plugin
SVG Circular Scroll Progress Bar
JQuery vs. Native JS Selectors
Vanilla Flavored Unorphanize
SVG Optimization Breakdown
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!