在Web開發(fā)中，CSS（層疊樣式表）被用來控制網(wǎng)頁的樣式和布局。而JavaScript（JS）則可以用來實現(xiàn)交互和動態(tài)效果。然而，你是否知道CSS屬性和JS變量之間其實有一些聯(lián)系呢？事實上，CSS屬性其實可以看作是JS變量的一種表現(xiàn)形式。

:root{
--main-color: #FEC10C;
--font-size: 14px;
}
p{
color: var(--main-color);
font-size: var(--font-size);
}

在這個例子中，我們首先在:root偽類中定義了兩個變量: --main-color和--font-size，分別表示主色調(diào)和字體大小。在p元素中，我們使用var()函數(shù)將這兩個變量作為CSS屬性來進行樣式控制。這樣一來，我們就可以通過JS代碼來修改這些CSS屬性，從而達到動態(tài)控制樣式的目的。

const body = document.querySelector('body');
body.style.setProperty('--main-color', '#2E7D32');
body.style.setProperty('--font-size', '16px');

在這個例子中，我們使用JS代碼獲取到文檔中的元素，并通過style.setProperty()方法來改變其CSS屬性的值。由于CSS屬性被定義為變量，我們只需要在:root中修改變量的值，就可以讓整個文檔中使用了該變量的元素都發(fā)生相應(yīng)的變化。

通過這種方式，我們可以很靈活地控制網(wǎng)頁的樣式，達到更加智能和動態(tài)的效果。CSS屬性作為JS變量的一種表現(xiàn)形式，不僅可以使代碼更加簡潔易于維護，而且還有很多有趣的用法等待我們?nèi)ヌ剿鳌?/p>