2010-08-03 3 views
0

Обычно я работаю с jQuery, который убирает большую часть боли в браузере (хотя это, к сожалению, не все). Тем не менее, похоже, что у него нет поддержки для манипуляции с CSS DOM, и это все еще похоже на минное поле. QuirksMode содержит некоторую информацию.DOM CSS Cross Browser Library

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

Кто-нибудь знает о библиотеке, которая упростит кросс-браузер CSS DOM maniuplation? Просто так я понятен, я не знаю, не пытается изменить правила CSS для элемента, или набор элементов (например, с помощью $ .css()), или для добавления/удаления классов. Я хотел бы изменить таблицы стилей напрямую.

+0

Селекторы стиля jQuery на CSS DOM тоже были бы довольно злыми .. –

ответ

1

Я настоятельно рекомендую YUI stylesheet utility. Я не видел никаких других библиотек с такой же функциональностью или чистым интерфейсом.

+0

Похоже на то, что я ищу. –

0

Не могли бы вы просто добавить или заменить элемент <style> в DOM основного документа и заполнить его сгенерированным CSS?

+0

Возможно, но это потребует, чтобы все новые правила имели более высокий приоритет, чем старые, или мне пришлось бы полностью отключить старую таблицу стилей (и поэтому придется воспроизводить все правила, в том числе те, которые я не изменял). Мне показалось, что изменение существующей таблицы стилей должно быть более простым. –

0

Лучший и простой способ - создать .jsp .php или все, что вы используете, которое принимает цветовые параметры, что, в свою очередь, делает выход .css с замененными цветами.

Используйте JavaScript, чтобы сделать запрос с цветовыми параметрами и добавить скрипт css на страницу.

Это можно сделать непосредственно на объекте styleSheet, хотя это займет больше времени и потребует дополнительного обслуживания. Каждый раз, когда вы хотите изменить свою собственную таблицу стилей, которую вы фактически используете для производства, вам также придется изменить версию предварительного просмотра. Появятся несоответствия Ergo.

Просто повторите использование шаблона стилей, который вы собираетесь использовать для производства в любом случае.

+0

Не масштабируется, если я хочу динамически изменять цвет, когда пользователь меняет его на панели выбора цвета; Я мог бы генерировать сотни запросов в секунду ... В противном случае, да, это было бы легко, поскольку это, по сути, то, что я делаю, чтобы создать таблицу стилей после сохранения их изменений. –

0

Может быть, вы должны попробовать что-то вроде:

document.styleSheets[0].disabled = true; 

Это инвалиды первой таблицы стилей текущей страницы. Возможно, если вы поиграете с ним, вы сможете решить свою проблему.

+0

Это то, чего я пытаюсь избежать; много разных поведений в разных браузерах, и я слишком ленив для этого :) Я хочу что-то, что уберет боль вместо этого. –

+0

Ну, я пробовал это, и он работает над IE, FF, Chrome, Safari, Opera. Я думаю, что это можно рассматривать как кросс-браузерное решение. – Zsolti

+0

Да, этот бит DOM-манипуляции - это кросс-браузер, но это только один бит - нигде рядом с тем, что я хочу сделать. В общем, поддержка CSS DOM не совместима с браузером. –