JavaScript（簡稱JS）是一種能夠讓網頁和應用程序變得更加動態和交互性的腳本語言。在網頁設計中，CSS（Cascading Style Sheets）則用來定義網頁的樣式和外觀。JS和CSS之間可以進行交互，JS可以通過操作CSS來改變網頁的樣式。下面就介紹一下JS如何操作CSS。

// 獲取元素
const element = document.getElementById("myElement");
// 操作元素樣式
element.style.color = "red";
element.style.backgroundColor = "blue";
// 添加或刪除元素類名
element.classList.add("newClass");
element.classList.remove("oldClass");

如上代碼所示，首先需要獲取要操作的元素，然后通過設置元素的樣式屬性來改變元素的樣式。在這里，我們通過element.style來改變元素的color和backgroundColor屬性。此外，我們還可以通過element.classList來添加或刪除元素的類名。在這里，我們通過classList.add來添加新的類名，通過classList.remove來刪除舊的類名。

除了上述方法，還有一些常用的JS操作CSS的方法，包括：

// 獲取元素計算后的樣式
const computedStyle = getComputedStyle(element);
const color = computedStyle.getPropertyValue("color");
// 獲取元素尺寸和位置
const rect = element.getBoundingClientRect();
const top = rect.top;
const left = rect.left;
const width = rect.width;
const height = rect.height;

通過getComputedStyle方法可以獲取元素計算后的樣式，包括元素的顏色、字體大小、元素位置等等。在這里，我們通過getPropertyValue方法來獲取元素的color屬性。通過getBoundingClientRect方法可以獲取元素相對于視口的位置和尺寸。在這里，我們通過rect對象來獲取元素的top、left、width和height屬性。

綜上所述，JS可以通過操作CSS來改變網頁的樣式，從而實現網頁的交互效果。通過上述方法，我們可以輕松地獲取和修改元素的樣式、位置和尺寸等等。學習和掌握JS操作CSS的方法，可以為網頁設計和開發帶來很大的便利。