Przykłady manipulacji stylami CSS

Zmiana koloru tła elementu po kliknięciu:

								
$("#myDiv").click(function() {
  $(this).css("background-color", "red");
});

Zmiana koloru tekstu po najechaniu kursorem:

								
var colors = ["red", "blue", "green", "yellow", "orange"];

$("#myDiv").css("background-color", colors[Math.floor(Math.random()*colors.length)]);

Zmiana rozmiaru czcionki po kliknięciu:

								
$("#myDiv").click(function() {
  $(this).css("font-size", "24px");
});

Dodanie klasy CSS do elementu po kliknięciu:

									
$("#myDiv").click(function() {
  $(this).addClass("highlight");
});

Animowanie zmiany wysokości po kliknięciu:

								
$("#myDiv").click(function() {
  $(this).animate({
    height: "500px"
  }, 1000);
});

Ukrycie elementu po kliknięciu:

								
$("#myDiv").click(function() {

  $(this).hide();
});

Zmiana CSS w zależności od rozmiaru okna:

								
$(window).resize(function() {
  if ($(window).width() < 768) {
    $("#myMenu").addClass("collapsed");
  } else {
    $("#myMenu").removeClass("collapsed");
  }
});

Zmiana tła na losową po każdym odświeżeniu:

								
$("#myDiv").hover(function() {
   $(this).css("color", "blue");
},

 function() {
   $(this).css("color", "black");
});

Notatka

Te przykłady pokazują tylko kilka sposobów wykorzystania manipulacji stylami CSS w jQuery. Istnieją oczywiście wiele innych możliwości, a jedynym ograniczeniem jest wyobraźnia i potrzeby projektu.