在前端開發中，CSS負責頁面的樣式美化，而JS則負責頁面的交互與動態效果。但有時候我們需要將JS中的一些變量傳遞給CSS，如何實現呢？在這篇文章中，我們將介紹如何使用JS給CSS文件傳遞變量。
首先，我們需要在HTML文件中引入CSS樣式表和JS腳本：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> ... <script src="app.js"></script> </body> </html>
接下來，在JS中定義我們需要傳遞的變量：
var color = '#ffffff';
然后，在JS中獲取CSS文件：
var stylesheet = document.styleSheets[0];
注：這里假設我們的CSS文件是第一個樣式表，如果不是，請修改下標。
接下來，我們可以使用JavaScript來操作這個樣式表。加入一個新的css規則：
stylesheet.insertRule('body { background-color: ' + color + '; }',0);這個規則將把背景顏色設置為我們之前定義的變量color的值。
最后，我們需要把修改后的樣式表應用到頁面中的元素中，這可以通過以下代碼實現：
document.getElementById('body').className += ' ' + stylesheet.cssRules[0].selectorText;在這里，我們假設頁面中的body元素有一個id為“body”，然后把剛才插入的CSS規則的選擇器作為這個元素的className屬性值。
我們已經成功實現了JS給CSS文件傳遞變量。但需要注意的是，這種方法只適合于在DOM中添加新規則或修改現有規則。如果需要修改已添加到樣式表中的現有規則，需要使用CSSOM接口或類似的庫。