Manipulacja Stylami CSS

Manipulacja stylami CSS w języku JavaScript polega na programowym zmienianiu stylów CSS elementów HTML. Za pomocą JavaScriptu można zmienić niemal każdą właściwość CSS, taką jak kolor, rozmiar, marginesy, obramowanie, tło itp. Do manipulacji stylami CSS można użyć różnych metod i właściwości elementów DOM.

Manipulowanie stylami CSS za pomocą JavaScript polega na zmianie wartości atrybutów stylów dla określonego elementu HTML. Można to zrobić na kilka sposobów, na przykład za pomocą metod takich jak: e.style.property = value oraz window.getComputedStyle(e)

								
const element = document.querySelector("p");
element.style.color = "red";
element.style.fontSize = "20px";

Możesz także dodać lub usunąć klasy CSS dla elementu za pomocą metod takich jak element.classList.add oraz element.classList.remove

								
const element = document.querySelector("p");
element.classList.add("highlight");
element.classList.remove("highlight");

Notatka

Zmiany stylów CSS mogą być wywoływane w odpowiedzi na różne zdarzenia, takie jak kliknięcie przycisku czy przesunięcie suwaka. Manipulacja stylami CSS za pomocą JavaScriptu pozwala na tworzenie bardziej interaktywnych stron internetowych.

Zmiana koloru tekstu

Można zmienić kolor tekstu na stronie, reagując na działania użytkownika, takie jak kliknięcie przycisku.

								
const button = document.querySelector("button");
const paragraphs = document.querySelectorAll("p");

button.addEventListener("click", function() {
	for (const paragraph of paragraphs) {
		paragraph.style.color = "red";
	}
});

Zmiana tła

Można zmienić tło elementu na stronie, reagując na działania użytkownika, takie jak przesuwanie suwaka.

								
const slider = document.querySelector("input[type='range']");
const box = document.querySelector(".box");

slider.addEventListener("input", function() {
	const value = slider.value;
	box.style.backgroundColor = `rgb(${value}, ${value}, ${value})`;
});

Dodawanie i usuwanie klas CSS

Można dodać lub usunąć klasę CSS do elementu na stronie, reagując na działania użytkownika, takie jak kliknięcie przycisku.

								
const button = document.querySelector("button");
const box = document.querySelector(".box");

button.addEventListener("click", function() {
	if (box.classList.contains("highlight")) {
		box.classList.remove("highlight");
	} else {
		box.classList.add("highlight");
	}
});

Notatka

To tylko kilka przykładów, jak można używać JavaScriptu do manipulowania stylami CSS. W rzeczywistych aplikacjach można używać bardziej skomplikowanych technik, takich jak animacje, transformacje i efekty parallax, aby stworzyć bardziej interaktywne i atrakcyjne strony internetowe.