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

Есть ли стандартный или надежный метод, который уже существует для фреймворка javascript, например jquery, для анализа таблицы стилей в объект?CSS-парсер/реферат? Как преобразовать таблицу стилей в объект

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

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

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

источник

2010-02-09 Anthony

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

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

Ваш конкретный вопрос: «Как узнать, что задано в таблице стилей для данного селектора».Вот один из способов приблизить его:

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.

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

источник

2010-03-07 03:53:42 Inaimathi

Интересный вопрос. На сайте Дэниела Ваксстока есть парсер jquery. http://bililite.com/blog/2009/01/16/jquery-css-parser/

К сожалению, это может быть не то, что вы ищете ... но стоит попробовать. Следующее описание взято с его сайта:

В JQuery вы звоните $(selector).parsecss(callback)

, который сканирует все и элементы в $ (селектор) или его потомков, разбирает каждый из них и передает объект (подробности ниже) обратного вызова функция.

Например создать CSS файл:

.gallery a { 
    -jquery-lightbox: {overlayBgColor: '#ddd'} 
}

и вы получите

$('.gallery a').lightbox({overlayBgColor: '#ddd'});

источник

2010-02-10 16:19:25 mre

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

ответ

Смежные вопросы