Как мне анализировать таблицы стилей @import с помощью Javascript

Question

Я пытаюсь читать селекторы CSS в моих таблицах стилей с массивом document.styleSheets. Он отлично работает с тегами <link> и <style>, но когда я использую @import внутри <style>, он не отображается в массиве - только как cssRule (стиль "Undefined" в Safari 3 и FF 3).

Итак: Как я могу разобрать CSS в файле @imported?

Answer 1

Предполагая, что наш документ содержит @ import-rule как первое правило в первой таблице стилей, вот код для совместимых со стандартами браузеров

document.styleSheets[0].cssRules[0].styleSheet.cssRules;

и специальный чехол для нашего любимого IE

document.styleSheets[0].imports[0].rules;

Вы могли бы легко понять это сами, если бы прочитали страницу на quirksmode.org , на которую я уже ссылался, а затем просмотрели свойства @import правила с помощью for..in петля - вот что я сделал ...

PS: Я не могу пока комментировать другие ответы, но если бы я мог, я бы высмеял вас правильно;)

Answer 2

Отличная страница с большим количеством информации для разбора таблицы стилей: http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets

Answer 3

Проверьте эту страницу, на которую можно перейти по ссылке quirksmode.org.

Спасибо, но я попробовал это ... Примеры Quirksmode никогда не анализируют таблицы стилей, встроенные в @ import.

Если у меня есть этот HTML / CSS:

<link rel="stylesheet" type="text/css" href="css/test1.css" />

<style type="text/css">

    @import url('css/test2.css');

    div {
        color: blue;
    }

</style>

... тогда document.styleSheets.length равен 2 (тег ссылки и тег стиля). Файл CSS, связанный через @import, будет доступен как

document.styleSheets[1].cssRules[0]. 

Другими словами, правило CSS. Это также можно увидеть на странице Quirksmode , которую вы упомянули, Кристоф. Я могу получить его cssText ("@import url ('css / test2.css');"), но не могу понять, как проанализировать CSS внутри файла (test2.css) ...

Если я здесь упустил что-то очевидное, не стесняйтесь высмеивать меня ...:)