Какая структура JavaScript может искать правила таблицы стилей CSS и редактировать их свойства?

Вопрос

Какая инфраструктура JavaScript (прототип, script.aculo.us, Mootools, MochiKit...) имеет достойную поддержку редактирования правил CSS?

Речь идет об изменении правила стиля. Я хочу иметь динамические классы CSS, которые меняются. Пример:

<style>
#answer, .reveal { display: none; color: blue; }
#answer { /* additional stuff */ }
</style>

Теперь, используя JavaScript, я хочу изменить правило, в котором есть "display: none". - Я убежден, что иногда это правильный путь; Я не ищу альтернативы, когда это неправильный способ сделать.

Какая структура позволяет сделать следующее:

  • выберите правило из всех правил (например, "#answer,.reveal" )
  • какое значение имеет выбранное правило для "отображения"?
  • удалить свойство "display" из правила (ов)

(2 и 3. легко выполняются только с помощью DOM, если я получаю дескриптор правила CSS обратно из фреймворка)

Рамки, которые недостаточно хороши:

YUIs StyleSheet, например, может искать только правила на одном листе за раз (ограниченный, но достаточно для меня), но он не может отображать, редактировать или извлекать правила мультиселектора, такие как мой первый пример (слишком ограниченный по моему вкусу).

YUI также не имеет возможности получить отдельные свойства (базовая DOM может, но вы не можете получить эту структуру через YUI). Вы можете удалить свойство "display" в одиночку, хотя, если вы получите правило от YUI, значит.

Dojo имеет некоторые плохо документированные и неполные вещи в dojox.html.styles

Ext JS имеет Ext.util.CSS. Я проверил код и обнаружил ошибку в getRule()... В противном случае это довольно неряшливо с выбором селектора (плохое влияние IE), что делает его плохой для правил с несколькими селекторами. Он также не может удалять свойства через API, но может дать вам CSSRule, чтобы вы могли сделать это сами. - Прогулка по дереву CSS настолько примитивна, насколько это может быть: ни опускаться на правила или импорт СМИ.

PD:

$('. open'). css (... независимо...) не является ответом, потому что он вообще не касается правил CSS (он затрагивает атрибуты CSS для некоторых элементов)

Ответы

Ответ 1

Нет, но, пожалуйста, докажите, что я ошибаюсь...

Порядочная реализация должна будет обсудить/документировать следующее:

  • как он проходит дерево CSS (включая @imports и @media)
  • как можно настроить прогулку (который рассматривается как @media и какие листы)
  • как обрабатываются/обходятся ограничения доступа к перекрестному домену.
  • поскольку CSS не имеет идентификаторов для самих правил: только селектор может действовать как достойный идентификатор правила
    • как IE8 и ниже разделены мультиселекторами, насколько интеллектуальна инфраструктура для этого?
    • IE9 хуже (см. quirksmode.org)
  • поскольку несколько правил могут быть выбраны одним селектором, как они упорядочены?
  • как можно найти правило из набора правил, зная свойство, которое мы хотим изменить?

До тех пор, пока рамки не догонят, рассмотрим:

  • получите стиль/ссылку node, где правило, которое вы ищете, находится в
  • используйте node. лист, чтобы напрямую перейти к CSSStyleSheet.
  • проверить quirksmode.org для quirks и f... IE
  • цикл по правилам, чтобы найти ваше правило через известный селектор
  • DOM CSSStyleRule предоставляет вам всю необходимую мощность над любым типом стиля.

Ответ 2

Как вы отметили, YUI имеет утилиту StyleSheet http://developer.yahoo.com/yui/3/stylesheet/

Пример:

var sheet = new Y.StyleSheet(styleNode);
sheet.set('.hover, .foo:hover', {
    background: 'red',
    color: '#fff'
});

Он также поддерживает создание таблиц стилей с нуля, передавая конструктору строку правил css.

Обратите внимание, что одна и та же политика происхождения предотвращает доступ к правилам удаленных узлов ссылок.

Он еще не поддерживает доступ к правилам как дерево объектов или доступ к определенным свойствам правил. Однако он поддерживает удаление правил или свойств правил. Сегодня лучшее, что вы можете сделать для работы с правилами как с объектами, будет чем-то вроде

var style = sheet.getCssText('.foo'),
    tmp = document.createElement('div');

tmp.style.cssText = sheet.getCssText('.foo');
if (tmp.style.display) { // does the rule include a setting for display
    ...
}

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

Ответ 3

Существуют библиотеки типа postCSS, что позволяет использовать модульную экосистему плагинов для изменения стилей CSS.