CSS Classes

With SniperJs, it is easy to manipulate the style of elements.

---

SniperJs Manipulating CSS

SniperJs has several methods for CSS manipulation. We will look at the following methods:

• hasClass() - Checks if the HTML element has a specified class.

• addClass() - Adds one or more classes to the selected elements

• removeClass() - Removes one or more classes from the selected elements

• toggleClass() - Toggles between adding/removing classes from the selected elements

• setClass() - This sets a new class for the element

• css() - Sets or returns the style attribute

Adding class names

$(".button").hasClass('move'); // returns true or false

Adding class names

sniper.js

$(".button").addClass('move');

Removing class names

$(".button").removeClass('move');

Replacing class names

$(".button").replaceClass('move','pause');

Toggling class name

$(".button").toggleClass('active');

Setting new class

$(".button").setClass('active');

Setting multiple classes at once

$("#button").setClass("active move cat-btn primary");

//OUTPUT:
// <button class="active move cat-btn primary" id="button"> Submit </button>

---

Working with more than one elements

Checking if multiple elements has a class name

//True if the element has the specified class, false otherwise.

$(".button*").hasClass('active');
//or 
$(".button",true).hasClass('active');

Adding a class name to multiple elements

$(".button*").addClass('move');
$(".button*").toggleClass('active');
//or 
$(".button",true).addClass('move');

Removing a class name from multiple elements

$(".button*").removeClass('move');
//or 
$(".button",true).removeClass('move');

Replacing a class name for multiple elements

$(".button*").replaceClass('old','new');
//or 
$(".button",true).replaceClass('old','new');

Toggling a class name for multiple elements

$(".button*").toggleClass('active');
//or 
$(".button",true).toggleClass('active');

Setting class name for multiple elements

$(".button*").setClass('active');

//or 

$(".button",true).setClass('active');

---

SniperJs css() Method

The SniperJs css() method will be explained in the next chapter.