当前位置：文江博客话题详情

是否可以从外部样式表中提取所有样式并将它们放在同一页面上？

发布于 2024-12-06 13:44:44 字数 199 浏览 1 评论 0原文

是否可以使用 javascript 或 jQuery 提取外部文件中列出的所有 CSS 规则，然后执行 $('link').remove() ，然后将所有 CSS 规则放在样式块中同一页面？

澄清一下：我想用 JavaScript 将所有外部 CSS 规则移动到页面中的内联样式块中，是的。

如果是这样，我该如何实现这一目标？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初雪 2024-12-13 13:44:44

我省略了有关将规则附加为“内联”规则的详细信息。这应该是相当微不足道的。另外，您将在下面看到我已禁用样式表而不是实际删除它们。我想强调的重要一点是，该解决方案允许导入其他样式表的样式表。

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;
}

I've left out the details about appending the rules as "inline" rules. That should be fairly trivial. Also, you'll see below I have DISABLED the style sheets rather than actually removing them. the important thing I want to hilight is that this solution allows for stylesheets that import other stylesheets.

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;
}

回复收藏 0 原文

一百个冬季 2024-12-13 13:44:44

那么你可以这样做：

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();

请记住，这会弄乱加载样式表中图像/字体的相对路径。

Well you could do something like:

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();

Keep in mind that this will screw up relative paths to images/fonts in loaded stylesheets.

回复收藏 0 原文

~没有更多了~