Парсер/абстрактор CSS? Как преобразовать таблицу стилей в объект

Существует ли стандартный или надежный метод для фреймворка javascript, такого как jquery, для анализа таблицы стилей в объект?

Две причины, почему я задаюсь вопросом:

  1. Я видел пару вопросов, когда кто-то хотел знать, как получить атрибут стиля, который был установлен таблицей стилей для селектора, а не то, что селектор в конечном итоге унаследовал.

  2. Если Sizzle делает то, что от него требуется, это может быть решением для обеспечения правильного отображения таблицы стилей в разных браузерах. . По сути, jquery анализирует таблицу стилей и устанавливает все атрибуты вручную (возможно, на основе браузера или известных нереализованных селекторов). Таким образом, дизайнеры/разработчики просто пишут таблицу стилей CSS3, которая совместима с предыдущими версиями, и jquery/sizzle выполняет работу, которую выиграл браузер. 'т.

Единственный недостаток, который я вижу, заключается в том, что это все еще не реализует атрибуты CSS3, но это только начало.


jquery css stylesheet sizzle
person Anthony    schedule 09.02.2010    source источник

Ответы (2)


arrow_upward
11
arrow_downward

На стороне клиента таблица стилей уже является объектом; он анализируется в дереве при загрузке страницы.

Допустим, у вас есть 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, то свойство 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, единственный надежный способ - посмотреть сам файл, насколько я знаю.

Ссылка на объект таблицы стилей доступна здесь.

person Inaimathi    schedule 07.03.2010

arrow_upward
0
arrow_downward

Интересный вопрос. На сайте Daniel Wachsstock есть анализатор 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'});
person mre    schedule 10.02.2010