Как создать «вычисляемый» CSS для произвольного фрагмента кода HTML - PullRequest
Новая
       7

Как создать «вычисляемый» CSS для произвольного фрагмента кода HTML

4 голосов
/ 04 марта 2010

Я начинаю работу над проектом, чтобы иметь возможность захватить произвольный фрагмент HTML (например, весь код в блоке <div></div>) и создать минимальный CSS, необходимый для визуализации фрагмента на пустой странице при сохранении того же визуального стиля это имеет на исходной веб-странице. Я чувствую, что всю тяжелую работу для этой функции можно найти в различных библиотеках и / или коде из проектов с открытым исходным кодом, и я хотел бы использовать эту работу в максимально возможной степени. Мой первый импульс - это получить исходный код Firebug и посмотреть, как можно использовать код, связанный с вкладкой «Computed». Обращаясь к сообществу StackOverflow за информацией о других местах, где можно посмотреть и / или подойти к этой разработке. Рад рассмотреть любые ресурсы на C, C ++, Python, Perl, PHP или Javascript. Спасибо!

(ОБНОВЛЕНИЕ: 8:00 3/4/10)

Из приведенного ниже фрагмента кода Синан я вижу, что существует стандартный способ вычисления CSS для элемента INDIVIDUAL. Полная проблема, однако, состоит в том, чтобы вычислить CSS для всего фрагмента, то есть эффективно рассчитать минимальную таблицу стилей, которая корректно вписывает стили для всего поддерева DOM (выбранного корневого элемента и всех подэлементов). Начало этого алгоритма может состоять в обходе поддерева и агрегировании CSS для всех отдельных элементов, но при этом эффективно игнорируются правила каскадирования CSS. Мысли?

1 Ответ

1 голос
/ 04 марта 2010

Причудливый режим может вам помочь,

http://www.quirksmode.org/dom/getstyles.html

Синан.

EDIT:

Это было мне интересно, и я сделал основную попытку (с некоторой помощью jquery).

Что еще более важно работает и дает вычисленные стили :)

Итак, вот фрагмент для получения вычисленных стилей body элемента:

JS: 

$.each(window.getComputedStyle(document.getElementsByTagName('body')[0],''),
    function(k,v){
        console.log(v + ' : ' +$('body').css(v));
});

ВЫВОД: 

...
font-weight : 400
height : 608px
left : 0px
letter-spacing : normal
line-height : 13.8333px
...
...