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

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

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

и особый случай для нашего всеми любимого IE

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

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

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

Check this page - which further links to this one on 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) ...

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

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