Доступ к содержимому файла CSS через JavaScript

Можно ли получить весь текстовый контент файла CSS в документе? F.ex:

<link rel="stylesheet" id="css" href="/path/to/file.css">
<script>
    var cssFile = document.getElementById('css');
    // get text contents of cssFile
</script>

Мне не удалось получить все правила CSS через document.styleSheets, есть ли другой способ?

Обновление: Конечно, есть опция ajax, я ценю ответы. Но для перезагрузки файла, использующего ajax, который уже загружен в браузер, кажется излишним. Поэтому, если кто-то знает другой способ извлечь текстовое содержимое существующего CSS файла (НЕ правила CSS), напишите!

Ответы

Ответ 1

вы можете загрузить контент с помощью простого вызова ajax get, если таблица стилей включена из того же домена

Изменить после вашего обновления:
Я пробовал этот код (на FX10) как доказательство концепции, которая использует только один запрос к CSS, но кажется мне немного взломанной и должна быть проверены и проверены. он также должен быть улучшен с некоторым отступлением, если javascript недоступен.

CSS (внешний файл test.css)

div { border: 3px solid red;}

HTML/JQuery

<!doctype html >
<html>
    <head>
       <!-- provide a fallback if js not available -->
       <noscript>
          <link rel="stylesheet" href="test.css" />
       </noscript>
    </head>
    <body>

        <div></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
        <script>
        $(document).ready(function() {

            $.when($.get("test.css"))
            .done(function(response) {
                $('<style />').text(response).appendTo($('head'));
                $('div').html(response);
            });
        })
        </script>
    </body>
</html>

Вы должны увидеть код CSS внутри div с красной рамкой вокруг.

Наслаждайтесь.

Ответ 2

В этом конкретном примере (где CSS находится в том же домене, что и страница), вы можете прочитать файл как текст через ajax:

$.ajax({
    url: "/path/to/file.css",
    dataType: "text",
    success: function(cssText) {
        // cssText will be a string containing the text of the file
    }
});

Если вы хотите получить доступ к информации более структурированным способом, document.styleSheets - это массив таблиц стилей, связанных с документом. Каждая таблица стилей имеет свойство, называемое cssRules (или просто rules в некоторых браузерах), которое представляет собой массив текста каждого правила в таблице стилей. Каждое правило имеет свойство cssText. Таким образом, вы можете прокручивать их, например:

$.each(document.styleSheets, function(sheetIndex, sheet) {
    console.log("Looking at styleSheet[" + sheetIndex + "]:");
    $.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
        console.log("rule[" + ruleIndex + "]: " + rule.cssText);
    });
});

Живой пример - В этом примере есть одна таблица стилей с двумя правилами.

Ответ 3

Я думаю, ваш лучший выбор - загрузить его с помощью ajax с чем-то вроде:

$.get("/path/to/file.css", function(cssContent){
    alert("My CSS = " + cssContent);
});

Ответ 4

Ближе всего вы можете получить таблицу стилей без использования ajax - это действительно перебрать все правила CSS и объединить их в строку. Это дает исходный файл со всеми комментариями и удалением лишних пробелов. Это имеет смысл, так как браузеру нужно сохранить только синтаксическую таблицу стилей в памяти, а не исходный файл. Это всего лишь 3 строки кода:

function css_text(x) { return x.cssText; }
var file = document.getElementById('css');
var content = Array.prototype.map.call(file.sheet.cssRules, css_text).join('\n');

Ответ 5

Да, вы можете использовать $.get.

Пример:

$.get('/path/to/css/file.css', function (resp) {
    // resp now should contain your CSS file content.

});

Ответ 6

Если вы использовали XMLHttpRequest для загрузки страницы, вы можете получить доступ к этим файлам, не загружая их во второй раз.

предпочтительнее не дублировать тонну, уменьшая пропускную способность и эффективность.

что, если css генерируется динамически и различается в зависимости от времени, когда оно запрашивается?