Lekcja 6: Manipulacja CSS w jQuery

jQuery znacznie upraszcza pracę ze stylami CSS elementów HTML. Pozwala na łatwe odczytywanie bieżących stylów, dodawanie, usuwanie i przełączanie klas CSS oraz bezpośrednie ustawianie konkretnych właściwości CSS dla wybranych elementów. To fundamentalne narzędzie do dynamicznego zmieniania wyglądu strony.

Praca z Klasami CSS

Manipulowanie klasami CSS jest zazwyczaj preferowanym sposobem zmiany wyglądu elementów, ponieważ oddziela style (CSS) od logiki (JavaScript).

• .addClass(nazwaKlasy | funkcja): Dodaje jedną lub więcej klas do każdego z wybranych elementów. Można podać nazwy klas rozdzielone spacjami lub funkcję, która zwraca nazwy klas do dodania.

  // Dodanie pojedynczej klasy
  $("p").addClass("podswietlony");
  
  // Dodanie wielu klas
  $("#naglowek").addClass("glowny duzy-tekst");
  
  // Dodanie klasy na podstawie indeksu (funkcja)
  $("li").addClass(function(index) {
    return "element-" + index; // Dodaje klasy element-0, element-1, ...
  });

• .removeClass(nazwaKlasy | funkcja): Usuwa jedną lub więcej klas z każdego z wybranych elementów. Bez argumentów usuwa wszystkie klasy. Można podać nazwy klas rozdzielone spacjami lub funkcję.

  // Usunięcie pojedynczej klasy
  $(".bledny").removeClass("bledny");
  
  // Usunięcie wielu klas
  $("div").removeClass("stary tymczasowy");
  
  // Usunięcie wszystkich klas
  $("#reset").removeClass();
  
  // Usunięcie klas na podstawie warunku (funkcja)
  $("p").removeClass(function(index, obecneKlasy) {
    if (obecneKlasy.includes("nieaktualny")) {
      return "nieaktualny"; // Usuń klasę "nieaktualny"
    }
  });

• .toggleClass(nazwaKlasy | funkcja, przełącznik): Dodaje klasę, jeśli jej nie ma, lub usuwa, jeśli już istnieje, dla każdego z wybranych elementów. Można podać wiele klas rozdzielonych spacjami. Opcjonalny drugi argument przełącznik (boolean) wymusza dodanie (jeśli true) lub usunięcie (jeśli false) klasy.

  // Przełączanie klasy "aktywny" po kliknięciu przycisku
  $("#przycisk-menu").on("click", function() {
    $("#menu-nawigacyjne").toggleClass("otwarte");
  });
  
  // Przełączanie wielu klas
  $(".element").toggleClass("widoczny podswietlony");
  
  // Wymuszenie dodania klasy
  $("div").toggleClass("zawsze-widoczny", true);
  
  // Wymuszenie usunięcia klasy
  $("span").toggleClass("ukryty", false);

• .hasClass(nazwaKlasy): Sprawdza, czy przynajmniej jeden z wybranych elementów posiada podaną klasę. Zwraca true lub false.

  if ($("#mojDiv").hasClass("wazny")) {
    console.log("Div jest ważny!");
  }
  
  let czyJestAktywny = $("button").hasClass("aktywny");

Bezpośrednia Manipulacja Stylami CSS

jQuery pozwala również na bezpośrednie odczytywanie i ustawianie konkretnych właściwości CSS. Jest to przydatne do drobnych, dynamicznych zmian, ale dla większych zmian wyglądu zaleca się używanie klas.

• .css(nazwaWlasciwosci): Pobiera obliczoną wartość podanej właściwości CSS dla pierwszego elementu w zbiorze. Nazwy właściwości można podawać w formacie CSS (np. \'background-color\') lub camelCase (np. \'backgroundColor\').

  // Odczytanie koloru tła
  let kolorTla = $("#kontener").css("background-color");
  console.log("Kolor tła:", kolorTla); // np. "rgb(255, 0, 0)" lub "red"
  
  // Odczytanie rozmiaru czcionki
  let rozmiarCzcionki = $("p:first").css("fontSize");
  console.log("Rozmiar czcionki:", rozmiarCzcionki); // np. "16px"

• .css(nazwaWlasciwosci, wartosc | funkcja): Ustawia podaną właściwość CSS na podaną wartość dla wszystkich wybranych elementów. Wartość może być stringiem (np. \'10px\', \'#ff0000\') lub liczbą (jQuery doda \'px\' dla większości właściwości numerycznych). Można też użyć funkcji.

  // Ustawienie koloru tekstu
  $(".ostrzezenie").css("color", "red");
  
  // Ustawienie marginesu górnego (jQuery doda \'px\')
  $("h1").css("marginTop", 20);
  
  // Ustawienie wielu właściwości naraz za pomocą obiektu
  $("#obrazek").css({
    border: "2px solid blue",
    padding: "5px",
    "border-radius": "8px" // Nazwa CSS w cudzysłowach
  });
  
  // Ustawienie szerokości na podstawie indeksu (funkcja)
  $("div.kolumna").css("width", function(index, currentValue) {
    return (index + 1) * 100; // Szerokość 100px, 200px, 300px...
  });

Wymiary i Pozycja Elementów

jQuery dostarcza metod do łatwego pobierania i ustawiania wymiarów oraz pozycji elementów na stronie.

• .width() / .height(): Pobiera lub ustawia szerokość/wysokość elementu (tylko zawartość, bez paddingu, borderów i marginesów).

  let szerokoscDiv = $("#mojDiv").width();
  $("#mojDiv").width(300); // Ustawia szerokość na 300px
  
  let wysokoscObrazka = $("img").height();
  $("img").height(function(index, currentHeight) {
    return currentHeight * 1.1; // Zwiększa wysokość o 10%
  });

• .innerWidth() / .innerHeight(): Pobiera szerokość/wysokość elementu włącznie z paddingiem, ale bez borderów.

  let wewnetrznaSzerokosc = $(".kontener").innerWidth();

• .outerWidth(includeMargin) / .outerHeight(includeMargin): Pobiera szerokość/wysokość elementu włącznie z paddingiem i borderem. Jeśli includeMargin jest true, wlicza również marginesy.

  let zewnetrznaSzerokosc = $("button").outerWidth();
  let calkowitaWysokosc = $("button").outerHeight(true); // Włącznie z marginesami

• .offset(): Pobiera aktualne współrzędne (top, left) pierwszego elementu w zbiorze względem lewego górnego rogu dokumentu. Zwraca obiekt { top: Y, left: X }.

  let pozycjaPrzycisku = $("#przycisk").offset();
  console.log("Góra:", pozycjaPrzycisku.top, "Lewo:", pozycjaPrzycisku.left);

  Można również użyć .offset({ top: Y, left: X }) do ustawienia pozycji elementu względem dokumentu, ale wymaga to, aby element miał ustawione position: relative, absolute lub fixed.

• .position(): Pobiera aktualne współrzędne (top, left) pierwszego elementu w zbiorze względem lewego górnego rogu jego pozycjonowanego rodzica (elementu nadrzędnego z ustawionym position innym niż static). Zwraca obiekt { top: Y, left: X }. Ta metoda jest tylko do odczytu.

  let pozycjaWzgledna = $(".dziecko").position();
  console.log("Góra (wzgl. rodzica):", pozycjaWzgledna.top, "Lewo (wzgl. rodzica):", pozycjaWzgledna.left);

• .scrollTop() / .scrollLeft(): Pobiera lub ustawia pionowe/poziome położenie paska przewijania dla wybranych elementów (lub okna/dokumentu).

  // Odczytanie, jak bardzo strona jest przewinięta w dół
  let przewiniecieStrony = $(window).scrollTop();
  
  // Przewinięcie diva do góry
  $("#dlugi-div").scrollTop(0);
  
  // Przewinięcie strony na sam dół
  $(window).scrollTop($(document).height());

<!DOCTYPE html>
<html>
<head>
    <title>Test Manipulacji CSS</title>
    <style>
        #box {
            padding: 20px;
            border: 1px solid black;
            margin: 10px;
            background-color: lightgray;
        }
        .pogrubiony {
            font-weight: bold;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <button id="zmien-kolor">Zmień Kolor Tła</button>
    <button id="przelacz-klase">Przełącz Pogrubienie/Ramkę</button>
    <button id="pokaz-wymiary">Pokaż Wymiary/Pozycję</button>

    <div id="box" class="startowa">To jest testowy div.</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            // 4. Sprawdzenie klasy startowej
            if ($("#box").hasClass("startowa")) {
                console.log("Div #box ma klasę startową.");
            }

            // 1. Zmiana koloru tła
            $("#zmien-kolor").on("click", function() {
                $("#box").css("background-color", "lightblue");
                console.log("Zmieniono kolor tła.");
            });

            // 2. Przełączanie klasy
            $("#przelacz-klase").on("click", function() {
                $("#box").toggleClass("pogrubiony");
                console.log("Przełączono klasę \'pogrubiony\'.");
            });

            // 3. Pokazywanie wymiarów i pozycji
            $("#pokaz-wymiary").on("click", function() {
                let box = $("#box");
                let szerokosc = box.width();
                let szerokoscZew = box.outerWidth();
                let pozycja = box.offset();
                console.log("--- Wymiary i Pozycja #box ---");
                console.log("Szerokość (width):", szerokosc);
                console.log("Szerokość zewnętrzna (outerWidth):", szerokoscZew);
                console.log("Pozycja (offset): Top:", pozycja.top, "Left:", pozycja.left);
            });
        });
    </script>
</body>
</html>