CSS парсер/абстрактор? Как да конвертирате таблица със стилове в обект

Има ли вече стандартен или надежден метод за рамка на javascript като jquery за анализиране на лист със стилове в обект?

Две причини да се чудя:

  1. Видях няколко въпроса, при които някой искаше да знае как да получи стиловия атрибут, зададен от листа със стилове за селектор, а не това, което селекторът в крайна сметка е наследил.

  2. Ако Sizzle прави това, което трябва, това може да е решение, за да се уверите, че таблицата със стилове се изобразява правилно в различни браузъри . По принцип накарайте jquery да анализира таблицата със стилове и да зададе всички атрибути ръчно (може би на базата на браузър или известни неимплементирани селектори.) По този начин дизайнерите/разработчиците просто пишат таблица със стилове на CSS3, която е съвместима напред, и накарайте jquery/sizzle да свърши работата, която браузърът спечели 'T.

Единственият недостатък, който виждам, е, че това все още няма да приложи 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="/bg/styles/global.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="/bg/styles/catalog.css" rel="stylesheet" type="text/css" media="screen"/> 
    <link href="/bg/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.

Справка за обекта на таблицата със стилове е достъпна тук.

person Inaimathi    schedule 07.03.2010

arrow_upward
0
arrow_downward

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