在網(wǎng)頁設(shè)計(jì)中，CSS是不可或缺的一部分。有時(shí)候我們希望通過JavaScript來動(dòng)態(tài)地添加一些CSS屬性，特別是在響應(yīng)用戶行為的時(shí)候。這時(shí)候CSS的"style"屬性可能會(huì)顯得有些力不足。 CSS提供了“StyleSheet”對(duì)象來動(dòng)態(tài)地添加、刪除和修改CSS規(guī)則，今天我們就來學(xué)習(xí)一下CSS動(dòng)態(tài)添加標(biāo)簽屬性的方法。

//create a new style sheet
var style = document.createElement('style');
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(style);
//add css rule
var sheet = style.sheet;
if (sheet.addRule) { //IE
sheet.addRule("p", "color:red");
} else { //Other browsers
sheet.insertRule("p {color:red}", 0);
}

上面的代碼創(chuàng)建了一個(gè)新的style標(biāo)簽，并將它添加到head標(biāo)簽中。接著，我們使用sheet對(duì)象來添加CSS規(guī)則。如果是IE瀏覽器，我們使用addRule函數(shù)，參數(shù)分別為選擇器和CSS屬性。如果是其他瀏覽器，我們使用insertRule函數(shù)，第一個(gè)參數(shù)為CSS規(guī)則，第二個(gè)參數(shù)為規(guī)則的位置。在這個(gè)例子中，我們動(dòng)態(tài)添加了一個(gè)p標(biāo)簽的color屬性。

動(dòng)態(tài)改變CSS屬性可以讓網(wǎng)頁更加靈活和響應(yīng)用戶的操作。但是要注意的是，過多地濫用CSS動(dòng)態(tài)添加規(guī)則會(huì)導(dǎo)致性能的下降。因此我們應(yīng)該慎重地使用這個(gè)特性。