jQuery CSS

Main CSS Methods

$("p").css("color", "red")

$("div").addClass("active")

$("div").removeClass("hidden")

$("button").toggleClass("pressed")

🔹 css() Method

The css() method gets or sets CSS properties:

// Get CSS property value
var color = $("#demo").css("color");
var fontSize = $("#demo").css("font-size");

// Set single CSS property
$("#demo").css("color", "blue");
$("#demo").css("background-color", "yellow");

// Set multiple CSS properties
$("#demo").css({
    "color": "white",
    "background-color": "navy",
    "padding": "10px",
    "border-radius": "5px"
});

<div id="demo">This text will be styled</div>

🔹 addClass() Method

The addClass() method adds one or more CSS classes:

// Add single class
$(".box").addClass("highlight");

// Add multiple classes
$(".box").addClass("highlight active important");

// Add class conditionally
if (score > 90) {
    $("#result").addClass("excellent");
} else if (score > 70) {
    $("#result").addClass("good");
} else {
    $("#result").addClass("needs-improvement");
}

/* CSS classes to add */
.highlight { background-color: yellow; }
.active { border: 2px solid green; }
.important { font-weight: bold; }
.excellent { color: green; }
.good { color: blue; }
.needs-improvement { color: orange; }

<div class="box">This box will get new classes</div>

🔹 removeClass() Method

The removeClass() method removes CSS classes:

// Remove single class
$(".box").removeClass("hidden");

// Remove multiple classes
$(".box").removeClass("old-style deprecated");

// Remove all classes
$(".box").removeClass();

// Remove class conditionally
$("button").click(function() {
    if ($(this).hasClass("active")) {
        $(this).removeClass("active");
    }
});

<div class="box hidden old-style deprecated">
    Initially hidden box
</div>

🔹 toggleClass() Method

The toggleClass() method adds or removes classes based on their current state:

// Toggle single class
$("button").click(function() {
    $(this).toggleClass("pressed");
});

// Toggle multiple classes
$("#menu").toggleClass("open visible");

// Toggle with condition
var isLoggedIn = true;
$("#user-menu").toggleClass("authenticated", isLoggedIn);

// Toggle different classes
$(".card").click(function() {
    $(this).toggleClass("expanded collapsed");
});

.pressed { 
    background: #333; 
    color: white; 
    transform: scale(0.95); 
}
.expanded { 
    height: 200px; 
    transition: height 0.3s; 
}

🔹 hasClass() Method

Check if elements have specific CSS classes:

// Check if element has class
if ($("#menu").hasClass("open")) {
    console.log("Menu is open");
} else {
    console.log("Menu is closed");
}

// Use in conditions
$("button").click(function() {
    if ($(this).hasClass("disabled")) {
        alert("Button is disabled!");
        return false;
    }
    // Continue with button action
});

// Toggle based on existing class
if ($(".sidebar").hasClass("collapsed")) {
    $(".sidebar").removeClass("collapsed").addClass("expanded");
} else {
    $(".sidebar").removeClass("expanded").addClass("collapsed");
}

🔹 Dimensions and Positioning

jQuery provides methods to work with element dimensions:

// Get dimensions
var width = $("#box").width();        // Content width
var height = $("#box").height();      // Content height
var outerWidth = $("#box").outerWidth();   // Including padding/border
var outerHeight = $("#box").outerHeight(); // Including padding/border

// Set dimensions
$("#box").width(300);
$("#box").height(200);

// Get/set position
var position = $("#box").position();  // Relative to parent
var offset = $("#box").offset();      // Relative to document

// Set position
$("#box").css({
    "position": "absolute",
    "top": "100px",
    "left": "50px"
});

<div id="box" style="width: 200px; height: 100px; background: lightblue; padding: 10px; border: 2px solid blue;">
    Resizable Box
</div>

🔹 Show and Hide Elements

Control element visibility with jQuery:

// Hide elements
$("#message").hide();           // Instant hide
$("#message").hide(1000);       // Hide with animation (1 second)

// Show elements
$("#message").show();           // Instant show
$("#message").show("slow");     // Show with slow animation

// Toggle visibility
$("#message").toggle();         // Switch between show/hide
$("#message").toggle(500);      // Toggle with animation

// Fade effects
$("#message").fadeIn();         // Fade in
$("#message").fadeOut();        // Fade out
$("#message").fadeToggle();     // Toggle fade

// Slide effects
$("#panel").slideDown();        // Slide down
$("#panel").slideUp();          // Slide up
$("#panel").slideToggle();      // Toggle slide

<div id="message" style="background: lightgreen; padding: 10px; margin: 10px 0;">
    This message can be shown/hidden
</div>
<button onclick="$('#message').toggle()">Toggle Message</button>

🔹 Practical Examples

Real-world CSS manipulation examples:

🔸 Theme Switcher

// Dark/Light theme toggle
$("#theme-toggle").click(function() {
    $("body").toggleClass("dark-theme");
    
    if ($("body").hasClass("dark-theme")) {
        $(this).text("Switch to Light Theme");
    } else {
        $(this).text("Switch to Dark Theme");
    }
});

🔸 Navigation Menu

// Mobile menu toggle
$("#menu-button").click(function() {
    $("#mobile-menu").toggleClass("open");
    $(this).toggleClass("active");
});

// Highlight current page
var currentPage = window.location.pathname;
$("nav a[href='" + currentPage + "']").addClass("current");

🔸 Form Validation Styling

// Real-time validation styling
$("input[required]").on("blur", function() {
    var value = $(this).val();
    
    if (value === "") {
        $(this).addClass("error").removeClass("success");
    } else {
        $(this).addClass("success").removeClass("error");
    }
});

// Submit button state
function updateSubmitButton() {
    if ($("input.error").length === 0 && $("input[required]").length > 0) {
        $("#submit").removeClass("disabled").prop("disabled", false);
    } else {
        $("#submit").addClass("disabled").prop("disabled", true);
    }
}

🔸 Image Gallery

// Image gallery with thumbnails
$(".thumbnail").click(function() {
    // Remove active class from all thumbnails
    $(".thumbnail").removeClass("active");
    
    // Add active class to clicked thumbnail
    $(this).addClass("active");
    
    // Change main image
    var newSrc = $(this).attr("data-full-image");
    $("#main-image").fadeOut(200, function() {
        $(this).attr("src", newSrc).fadeIn(200);
    });
});