Студопедия

КАТЕГОРИИ:

АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника


Свойства таблиц стилей




В JavaScript имеется объект stylesheet, который позволяет получить доступ к информации о таблице стилей, на которую ссылается текущая web-страница, такую как отключена она или нет, ее местоположение, и список правил CSS, которые она содержит. Полный список свойств объекта stylesheet (и многих других вещей также) можно найти в документации W3C по DOMтаблиц стилей (Document Object Model Style Sheets - http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html).

Давайте рассмотрим (в данный момент) теоретический пример - пусть имеется web-сайт, где представлена серия технических статей. Мы хотим привлечь внимание к некоторым из этих статей с помощью интересной анимированной карусели, но как быть с пользователями, у которых JavaScript не включен по каким-то причинам? Вспоминая полученные знания о ненавязчивом JavaScript, мы хотим, чтобы функции Web-сайта также работали для этих пользователей, но мы можем захотеть оформить сайт для этих пользователей по-другому, чтобы им было удобно использовать сайт, даже без карусели.

Мы хотим иметь таблицу стилей, которая активируется, только если активируется JavaScript. Нам повезло - интерфейс DOM таблиц стилей предоставляет нам доступ к атрибуту disabled, который позволяет включать и выключать таблицы стилей.

Большинство свойств объекта stylesheet предназначены только для чтения, но некоторые, такие как disabled, можно изменять.

Можно также использовать свойства таблиц стилей, чтобы различать несколько таблиц стилей на странице. Свойство src может помочь идентифицировать внешние таблицы стилей, но не может указать внутренние элементы стиля. Лучший способ, который позволяет ссылаться как на внутренние, так и на внешние таблицы стилей по отдельности, состоит в использовании свойства title. При последовательном просмотре document.styleSheets можно различать таблицы стилей, использованные на странице. Следующий пример показывает, как это можно реализовать:

function getStyleSheet(unique_title) { for(var i=0; i<document.styleSheets.length; i++) { var sheet = document.styleSheets[i]; if(sheet.title == unique_title) { return sheet; } }}

Для каждого объекта stylesheet, извлеченного из массива styleSheets, можно получить доступ к его свойству title, чтобы проверить, что оно содержит заголовок, который требуется найти. Действующий пример этого можно видеть в примере по добавлению и удалению правил, который рассматривается в следующем разделе.

Переключение между различными таблицами стилей на основе предпочтений пользователей является достаточно общим свойством web-сайтов - используя, рассмотренные до сих приемы, можно задать несколько таблиц стилей и использовать только те, которые текущий посетитель сайта хотел бы увидеть. Давайте посмотрим на реальный пример - вначале оформляется текст, но когдаатрибут disabled задается как true, определенный нами CSS будет отключен. Можно снова легко включить CSS, задаваяdisabled как false. Посмотрите пример со свойствами таблиц стилей (http://dev.opera.com/articles/view/dynamic-style-css-javascript/stylesheetproperties.html), чтобы увидеть, как это можно использовать.


Поделиться:

Дата добавления: 2015-09-15; просмотров: 127; Мы поможем в написании вашей работы!; Нарушение авторских прав





lektsii.com - Лекции.Ком - 2014-2024 год. (0.006 сек.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав
Главная страница Случайная страница Контакты