Включение и выключение таблиц стилей

Дата добавления: 2015-07-09; просмотров: 750; Нарушение авторских прав

Простейший прием работы с таблицами стилей является к тому же самым пере_ носимым и устойчивым. Стандарт HTML DOM Level 2 определяет свойство dis_ abled для элементов <link> и <style>. HTML_теги не имеют соответствующего ат_ рибута, но это свойство доступно JavaScript_сценариям. Как следует из его име_ ни, если свойство disabled принимает значение true, таблица стилей, связанная с данным элементом <link> или <style>, будет запрещена, и в результате она иг_ норируется броузером.

Это наглядно демонстрирует пример 16.8. Он представляет HTML_страницу, ко_ торая включает четыре таблицы стилей. На странице выводятся четыре флаж_ ка, дающие пользователю возможность разрешать или запрещать применение каждой из четырех таблиц стилей.

398 Глава 16. CSS и DHTML

Пример 16.8. Включение и выключение таблиц стилей

<head>

<!__ Здесь с помощью <link> и <style> определены четыре таблицы стилей. __> <!__ Две подключаемые внешние таблицы стилей являются альтернативными __> <!__ и потому по умолчанию отключены. __>

<!__ Все таблицы имеют атрибут id, что позволяет обращаться к ним по имени. __> <link rel="stylesheet" type="text/css" href="ss0.css" id="ss0">

// Эта функция включает или выключает таблицу стилей с заданным атрибутом id.

// Она работает с элементами <link> и <style>.

function enableSS(sheetid, enabled) { document.getElementById(sheetid).disabled = !enabled;

}

</script>

</head>

<body>

<!__ Это простая HTML_форма, которая позволяет включать и выключать таблицы стилей. __> <!__ Здесь жестко определены имена таблиц в документе, но можно __> <!__ определять их динамически на основе заголовков. __>

<form>

<input type="checkbox"

onclick="enableSS('ss0', this.checked)" checked>Основная <br><input type="checkbox"

onclick="enableSS('ss1', this.checked)">Крупный шрифт <br><input type="checkbox"

onclick="enableSS('ss2', this.checked)">Высокий контраст <br><input type="checkbox"

onclick="enableSS('ss3', this.checked)" checked>Sans Serif

</form>

</body>

<== предыдущая лекция	\|	следующая лекция ==>
CSS_классы	\|	Объекты и правила таблиц стилей