<HTML>
<HEAD>
<STYLE id='ss' type='text/css'></STYLE>
<SCRIPT language='JavaScript' type='text/javascript'>
var cssText1="\
body {color: red;}\
p {font-weight: bold;}\
";
var cssText2="\
body {background-color: silver;}\
p {font-style: italic;}\
";
var styleElement=document.getElementById("ss");
var styleSheet=styleElement.styleSheet;
////или вместо предыдущих двух строк:
//var styleSheet=document.styleSheets.item(0);
//// (обратная ссылка на объект HTML-элемента таблицы стилей:
//// styleSheet.owningElement === styleElement)
////Можно создать и на ходу, без предварительного создания элемента <STYLE>:
//var styleSheet=document.createStyleSheet();
window.onload=function () {
styleSheet.cssText=cssText1;
window.setTimeout('styleSheet.cssText=cssText2;', 2000);
};
</SCRIPT>
</HEAD>
<BODY>
<P>Hello, world!</P>
</BODY></HTML>В этом конкретном случае требуется кроссбраузерность, поэтому переписывать внешний файл стилей не подходит.
Под «неподходящим» имеется ввиду что-то вроде
<HTML>
<HEAD>
<LINK id='ss' rel='stylesheet' type='text/css' href='javascript:"";'>
<SCRIPT language='JavaScript' type='text/javascript'>
var cssText1="\
body {color: red;}\
p {font-weight: bold;}\
";
var cssText2="\
body {background-color: silver;}\
p {font-style: italic;}\
";
var styleElement=document.getElementById("ss");
window.onload=function () {
styleElement.href="javascript:cssText1;";
window.setTimeout('styleElement.href="javascript:cssText2;";', 2000);
};
</SCRIPT>
</HEAD>
<BODY>
<P>Hello, world!</P>
</BODY></HTML>?
Хотя я думаю, это решение можно доработать до кроссбраузерного.
innerHTML
innerTextи экзотику, эти методы чистый текст пишут, а внутрь <style></style>, нет
replaceChild()
createTextNode()
insertAdjacentHTML()Подключать класс или писать стили в каждый элемент, можно, но накладно, слишком много элементов, а так нужно изменить одно единственное место.
В этом конкретном случае требуется кроссбраузерность, поэтому переписывать внешний файл стилей не подходит.
Кто с таким сталкивался? как победили?
]]>