Давайте еще раз поговорим о динамическом добавлении правил стиля.

Раньше я давал полезную функцию в одном сообщении в блоге , и она широко использовалась в нескольких моих сообщениях в блоге. В последнее время я много читаю, поэтому написал этот пост в блоге, чтобы разобраться в том, что узнал.

Нет сомнений, что, исходя из принципа разделения производительности и структуры, прямой импорт новой таблицы стилей является лучшим выбором, но в некоторых случаях это не сработает. Например, если мы создадим перетаскиваемый DIV с точки зрения. установив стили, расположите его абсолютно, чтобы он не влиял на исходный поток документа, а затем постепенно измените его верхнее и левое значения, чтобы добиться эффекта движения. Поскольку перетаскивание имеет временную концепцию — 24 кадра в секунду, невозможно включить в таблицу стилей все. Поэтому очень необходимо динамически генерировать правила стиля и быстро изменять правила стиля. Для этого W3C проделал большую работу. В DOM2.0 были расширены многие интерфейсы.

Сделаем шаг назад: разделение производительности и структуры не ограничивается импортом таблиц стилей. Знаете, существует три типа стилей: внешние стили, внутренние стили и встроенные стили.

• Внешние стили, те, о которых мы упоминали выше, прописываются в отдельном CSS-файле.
• Внутренние стили записываются независимо в теге стиля, обычно размещаемом в теге head. Стиль, созданный функцией, которую я предоставил последней, является внутренним стилем.
• Встроенные стили — это стили, записанные в атрибуте style элемента.

Новые добавленные интерфейсы в основном сконцентрированы во внешних стилях — я говорю «интерфейсы», потому что соответствующие реализации предоставляются браузером. Высокомерные ребята, такие как IE6, никогда не игнорируют их существование.

В модели W3C тег ссылки и тег стиля типа «text/css» представляют собой объект CSSStyleSheet. Мы можем получить все объекты CSSStyleSheet на текущей странице через document.styleSheets, но это коллекция, а не простая. множество. Каждый объект CSSStyleSheet имеет следующие свойства:

• тип: всегда возвращает строку «text/css».
• отключено: имеет тот же эффект, что и отключенный ввод, а значение по умолчанию — false.
• href: Возвращает URL-адрес. Если это тег стиля, он имеет значение NULL.
• title: Возвращает значение заголовка. Заголовок такой же, как заголовок обычного элемента. Вы можете написать все, что захотите.
• СМИ: Данные, возвращаемые IE и Firefox, не совпадают, поэтому сложно сказать. media используется для указания того, для каких устройств действительны правила стиля, которыми он владеет. По умолчанию — all.
• OwnerRule: возвращает объект CSSRule, доступный только для чтения, если таблица стилей введена с помощью @import.
• cssRules: возвращает коллекцию объектов правил стиля, доступных только для чтения (объекты CSSStyleRule).

Объект правила стиля (объект CSSStyleRule) был разработан W3C для более детальной настройки стиля. Например, объекту правила стиля соответствует следующее:

кнопка[тип] {
отступы: 4px 10px 4px 7px;
высота строки: 17 пикселей;
}

Объект правила стиля имеет следующие основные атрибуты: type, cssText, ParentStyleSheet, ParentRule.

Тип чем-то похож на nodeType, который подразделяет правила стиля. Он использует целое число для представления своего типа. Конкретная ситуация следующая

• 0: CSSRule.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (определить объект CSSStyleRule)
• 2: CSSRule.CHARSET_RULE (определить объект CSSCharsetRule, используемый для установки набора символов текущей таблицы стилей, значение по умолчанию такое же, как на текущей веб-странице)
• 3: CSSRule.IMPORT_RULE (определите объект CSSImportRule, который будет использовать @import для введения других таблиц стилей)
• 4: CSSRule.MEDIA_RULE (определить объект CSSMediaRule, используемый для установки того, используется ли этот стиль для мониторов, принтеров, проекторов и т. д.)
• 5: CSSRule.FONT_FACE_RULE (определить объект CSSFontFaceRule, @font-face в CSS3)
• 6: CSSRule.PAGE_RULE (определить объект CSSPageRule)

Излишне говорить, что cssText — очень полезный атрибут, который напрямую преобразует строки в правила стиля, игнорируя различия в атрибутах стиля каждого браузера, таких как cssFloat и styleFloat.

ParentStyleSheet и ParentRule предназначены для @import. Однако у @import есть проблемы в IE, поэтому я его практически не использую.