Вопрос № 102746: Здравствуйте, эксперты. Хотел узнать, как сделать смену стиля страницы через
селектор-список. Нашёл только смену фона. А мне хотелось бы, чтобы
пользователь выбрал из списка. Пробовал (см. приложение) - не получилось.
Скажите, что не так ...
Вопрос № 102.746
Здравствуйте, эксперты. Хотел узнать, как сделать смену стиля страницы через
селектор-список. Нашёл только смену фона. А мне хотелось бы, чтобы
пользователь выбрал из списка. Пробовал (см. приложение) - не получилось.
Скажите, что не так сделал.
Отвечает: Бородин Александр Олегович
Здравствуйте, Кулаченко Антон!
Ну еще бы оно работало! Тут даже мне видно, хотя я и полный профан в ЯваСкрипт. Ошибка в первой же строке. Вы подключаете файл стилей неправильно. Дело в том, что в Вашем случае браузер ищет файл "style.sel.options.value" и естественно, не находит. Понятное дело, что так делать нельзя. Я бы так сделал: сохранил бы значение списка в кукисах, а при перезагрузке страницы передал значение для подключения. Как внешний файл подключается, я точно не помню, навроде такого что-то:
document.style.src='адрес файла'.
Если брать Вашу модель, то на момент подключения таблицы стилей, ее адрес уже должон быть известен. То есть надо выбрать значение из списка ДО подключения, а у Вас получается после.
Принцип, короче, такой:
Выбрали значение - страницу перезагрузили - подключили. У Вас немного наоборот: подключили - выбрали значение - страницу не перезагружали.
Если не сохранять в кукисах, то при следующей загрузке страницы значение файла снова заменится на то, которое по умолчанию. То есть необходимо обеспечить перенос этого значения между страницами. Тогда Вы добьетесь, чего хотели.
--------- Ничто не сближает людей так, как совместное преступление.
То что у вас неправильно, вам уже сказали. А как сделать правильно?
Я придумал следующую комбинацию:
"style.css":
import url("style1.css");
Style.css имеет одно правило которое мы будем заменять. Это правило импортирует другую таблицу стилей. style1.css - таблица стилей по умолчанию.
"index.html":
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
>
var addCSS = function(str) {
<-- удаляем правило import -->
document.styleSheets[0].deleteRule(0);
<-- добавляем правило import нужной таблицы стилей -->
document.styleSheets[0].insertRule('@import "' + str + '";', 0);
}
</script>
</head>
<body>
<-- выбор таблицы стилей -->
<input type="radio" name="style" onclick="addCSS('style1.css')" selected>s1<br>
<input type="radio" name="style" onclick="addCSS('style2.css')">s2<br>
</body>
</html>
Но большая проблема в том, что IE6 (насчёт 7 не знаю) не поддерживает модуль объектной модели DOM под названием StyleSheets. Однако и Firefox и Opera всё прекрасно отображают.
Надеюсь я хоть чем-то да помог...
--------- Si vox est - canta!
Ответ отправил: Errandir (статус: 5-ый класс)
Ответ отправлен: 20.09.2007, 13:46