Просто добавляет к таблице стилей CSS-правило, которое перекрывает имеющееся в соответствии с правилом CSS-каскада.
Ну вот например, имеется у вас такая таблица стилей:
Цитата(DenWPF @ 24.9.2011, 16:45  ) |
| Код |
<style type="text/css" id="preview_style" runat="server" >
.carbin .carbin-article {
background: url("../images/ret.png") no-repeat scroll 0 0 #FFFFFF;
font: 12px Arial;
height: 200px;
margin: 20px 0 0;
overflow: hidden;
position: relative;
width: 200px;
}
</style>
|
|
Вы пишете, к примеру такой код:
| Код |
var sheet = document.getElementById("preview_style");
// получаем ссылку на объект CSSStyleSheet (по-разному для IE и остальных браузеров)
sheet = sheet.sheet || sheet.styleSheet;
if (sheet.insertRule) {
sheet.insertRule(".carbin .carbin-article { background: url('../images/ret.png') no-repeat scroll 0 0 #FFFF00; }",
sheet.cssRules.length);
} else { // IE
sheet.addRule(".carbin .carbin-article",
"background: url('../images/ret.png') no-repeat scroll 0 0 #FFFF00");
}
|
Метод https://developer.mozilla.org/en/DOM/CSSStyleSheet/insertRule (http://msdn.microsoft.com/en-us/library/aa358796(VS.85).aspx для IE) добавляет в таблицу стилей CSS-правило. Сигнатуры методов insertRule и addRule немного отличаются, поэтому для IE приходится писать отдельно. Во второй параметр метода insertRule передаем такое значение (cssRules.length), чтобы добавить правило в самый конец таблицы стилей. Тогда это правило перекроет старое аналогичное правило в соответствии с принципом http://www.xiper.net/learn/css/inheritance-and-cascade/cascade.html. IE по умолчанию добавляет правило в конец.
Тогда динамическое строение вашей таблицы стилей становится таким:
| Код |
<style type="text/css" id="preview_style" runat="server" >
.carbin .carbin-article {
background: url("../images/ret.png") no-repeat scroll 0 0 #FFFFFF;
font: 12px Arial;
height: 200px;
margin: 20px 0 0;
overflow: hidden;
position: relative;
width: 200px;
}
.carbin .carbin-article {
background: url('../images/ret.png') no-repeat scroll 0 0 #FFFF00; /* это правило перекрывает первое */
}
</style>
|
Добавленное в конец правило перекрывает предыдущее правило для фона, чем и достигается желаемый результат. Сейчас понятно более или менее?  |
