Можно ли извлечь все стили из внешних таблиц стилей и разместить их на одной странице? - PullRequest
Новая
       1

Можно ли извлечь все стили из внешних таблиц стилей и разместить их на одной странице?

0 голосов
/ 23 сентября 2011

Можно ли с помощью javascript или jQuery извлечь все правила CSS, перечисленные во внешних файлах, затем выполнить $('link').remove(), а затем поместить все правила CSS в блоки стилей на одной странице?

уточнить: я хочу переместить все внешние правила CSS в блоки встроенных стилей на странице с помощью JavaScript, да.

Если да, то как мне это сделать?

Ответы [ 2 ]

1 голос
/ 23 сентября 2011

Я пропустил подробности о добавлении правил как "встроенных" правил.Это должно быть довольно тривиально.Кроме того, вы увидите ниже, что я ОТКЛЮЧИЛ таблицы стилей вместо того, чтобы фактически удалить их.Важно отметить, что это решение позволяет использовать таблицы стилей, которые импортируют другие таблицы стилей.

TEST.HTML 

<html>
    <body>
        <link rel="stylesheet" type="text/css" media="screen,projection" href="screen.css">
        <link rel="stylesheet" type="text/css" media="screen,projection" href="screen2.css">
    </body>
    <script>
            function processSheet(sheet){
                if (sheet.cssRules){
                    for (var i=0; i< sheet.cssRules.length; i++){
                            if (sheet.cssRules[i].type == 3){
                                processSheet(sheet.cssRules[i].styleSheet);
                            }
                            else{
                                alert(sheet.cssRules[i].cssText);
                            }
                    }                               
                }
            }

            for (var i=0; i< document.styleSheets.length; i++){
                processSheet(document.styleSheets[i]);
            }

            for (var i=0; i< document.styleSheets.length; i++){
                processSheet(document.styleSheets[i].disabled=true);
            }   

    </script>

    <div>Hi</div>
</html>

screen.css 

@import url("reset.css");
table {
    background-color:green;
}
1 голос
/ 23 сентября 2011

Ну, вы можете сделать что-то вроде: 

var $stylesheets = $("head link[rel=stylesheet]"),
    $style = $('<style>').appendTo('head');

$stylesheets.each(function() {
    var href = $(this).attr("href");
    $.get(href, function(data) {
        $style.append(data);
    });
});

$stylesheets.remove();

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...