如何用js动态导入css？

Question

我遇到了一些情况，所以我无法加载一些 css，html 中的 js。所以我决定用 $.get() 动态拉动。但是，我测试了 js 的情况，但在 css.

的情况下没有任何线索

以下是从远程 CDN 动态拉取并执行 js。

拉动和执行 https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js'>

是否可以从远程获取其他 javascript 文件？

<pre>
    <code class='java'>
        System.out.println("It's done!");
    </code>
</pre>

<script>
    const highlightCDN = 'http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js';
    $(function(){
        $.get(highlightCDN, function(data){
            console.log('done!');
            eval(data);
        }).done(function(){
            $('pre code').each(function(i, block){
                console.log(i);
                hljs.highlightBlock(block);
            });
        });
    });
</script>

但是，我无法在 css 上使用 eval。我能做什么？有可能吗？非常感谢！

P.S。如果我像我的例子那样拉取 js，我可以在拉取后全局使用它吗？

Answer 1

您可以通过 jQuery 插入一个 link 元素，它指向您的外部 css 文件，如下所示：

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'external-css-stylesheet-url-goes-here'));

如何用js动态导入css？

How to import css dynamically with js?

javascript

css

ajax

jquery

eval