在JS中寫CSS樣式,可以通過操作CSSStyleSheet對象來實(shí)現(xiàn),CSSStyleSheet對象包含了所有的CSS規(guī)則,可以通過JavaScript來添加、刪除或修改這些規(guī)則。
我們需要獲取CSSStyleSheet對象的引用,可以通過調(diào)用document.styleSheets屬性來獲取,該屬性返回一個包含所有樣式表的數(shù)組,我們可以遍歷這個數(shù)組,找到我們需要操作的樣式表。
一旦我們獲取了CSSStyleSheet對象的引用,就可以開始添加CSS規(guī)則了,可以通過調(diào)用樣式表的insertRule方法來添加規(guī)則,這個方法接受兩個參數(shù):規(guī)則的選擇器文本和規(guī)則的樣式文本,我們可以將這兩個參數(shù)拼接成一個字符串,然后調(diào)用該方法來添加規(guī)則。
假設(shè)我們需要添加一個樣式規(guī)則,使得所有段落文本的顏色為藍(lán)色,我們可以編寫如下代碼:
var styleSheet = document.styleSheets[0]; // 獲取***個樣式表 var rule = 'p { color: blue; }'; // 樣式規(guī)則文本 styleSheet.insertRule(rule, 0); // 在樣式表的開頭添加規(guī)則
這段代碼會在樣式表的開頭添加一個新的樣式規(guī)則,使得所有段落文本的顏色為藍(lán)色。
除了添加規(guī)則外,我們還可以使用JavaScript來刪除或修改已有的樣式規(guī)則,我們可以使用styleSheet的deleteRule方法來刪除一個規(guī)則,或者使用styleSheet的cssRules屬性來修改一個規(guī)則。
需要注意的是,雖然我們可以在JavaScript中直接操作CSS樣式表,但是這種做法并不符合CSS的模塊化設(shè)計(jì)原則,在實(shí)際開發(fā)中,我們應(yīng)該盡量使用外部CSS文件來定義樣式規(guī)則,而不是在JavaScript中直接操作樣式表。