Синтаксический анализатор/референт CSS? Как преобразовать таблицу стилей в объект
Уже существует ли стандартный или надежный метод там для платформы JavaScript, такой как jQuery для парсинга таблицы стилей в объект?
Две причины того, почему я задаюсь вопросом:
Я видел несколько вопросов, где кто-то хотел знать, как получить атрибут стиля, который был установлен таблицей стилей для селектора, не что селектор, в конечном счете наследованный.
Если Шипение делает то, что оно, как предполагается, это могло быть решением для проверки, что таблица стилей была представлена правильно перекрестным браузером. В основном имейте jQuery, анализируют таблицу стилей и устанавливают все атрибуты вручную (возможно, на основе браузера или известных нереализованных селекторов.) тот способ, которым разработчики/разработчики просто пишут таблицу стилей CSS3, которая прямо совместима и имеет jQuery/шипение, делают работу, браузер не будет.
Единственный недостаток, который я вижу, - то, что это все еще не реализует атрибуты CSS3, но это - запуск.
2 ответа
На стороне клиента таблица стилей уже является объектом; она разбирается в дерево при загрузке страницы.
Допустим, у вас есть HTML-страница, начинающаяся с
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="/styles/global.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="/styles/catalog.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="/styles/banner.css" rel="stylesheet" type="text/css" media="screen"/>
и global.css содержит строки
#page { background-color: #fff; margin-top: 20px; margin-bottom: 20px; text-align: left; width: 100%; margin-top: 20px; padding: 0px; min-width: 900px; border: none; }
#header { background-color: transparent; }
#main { background-color: transparent; margin-left: 10px; margin-right: 10px; padding: 8px 0px 8px 0px;}
#sidebar { margin-right: 12px; }
Тогда, чтобы найти, что установлено для background-color из #page, вам нужно написать document. styleSheets[0].cssRules[0].style.backgroundColor, который вернет #fff (или rgb(255, 255, 255) в некоторых браузерах, я думаю).
Другие полезные вещи, исходя из вышеприведенных таблиц:
document.styleSheets[0].cssRules[3].cssText //"#sidebar { margin-right: 12px; }"
document.styleSheets[0].cssRules[2].selectorText //"#main"
Если у вас был более сложный селектор, например #main div.header a, #main div.header a:visited, то свойство selector text возвращает весь текст, а не только первую часть.
Ваш конкретный вопрос: "Как я могу узнать, что установлено в таблице стилей для данного селектора". Вот один из способов приблизительного ответа:
function findProperty(selector) {
rules = document.styleSheets[0].cssRules
for(i in rules) {
if(rules[i].selectorText==selector) return rules[i].cssText;
}
return false;
}
findProperty('#sidebar'); //returns "#sidebar { margin-right: 12px; }"
Дело в том, что дерево CSS, к которому вы имеете доступ таким образом, уже было разобрано браузером (отсюда и "приблизительное" выше). Если вы работаете в Firefox, вы не увидите никаких -webkit стилей, потому что mozilla просто отбрасывает их. Различные браузеры также имеют тенденцию иметь свой собственный способ отображения цветов (как указано выше; если ваш фактический .css файл имеет заданный цвет, установленный в #fff, и вы проверяете его в JavaScript после разбора, вы можете получить #fff, #ffffff или rgb(255, 255, 255)).
Вышеприведенные данные скажут вам, как ваш браузер видит этот лист CSS; если вы хотите узнать, какие конкретные символы ascii содержались в исходном файле .css, единственный надежный способ - посмотреть сам файл, AFAIK.
Ссылка на объект stylesheet доступна здесь.
Интересный вопрос. Есть парсер jquery на сайте Дэниела Уочстока. http://bililite.com/blog/2009/01/16/jquery-css-parser/
К сожалению, это может быть не то, что вы ищете... но попробовать стоит. Следующее описание взято с его сайта:
В jQuery вы вызываете $(selector).parsecss(callback)
которая сканирует все элементы в $(selector) или его потомках, разбирает каждый из них и передает объект (подробности ниже) в функцию обратного вызова.
Например, создайте CSS файл:
.gallery a {
-jquery-lightbox: {overlayBgColor: '#ddd'}
}
и вы получите
$('.gallery a').lightbox({overlayBgColor: '#ddd'});