javascript - 使用 JS 向文档添加样式表

Question

jQuery(document).ready(function($) { 
        /******* Load CSS *******/
        $('head').append('<link rel="stylesheet" type="text/css" media="all" href="'+('https:' == document.location.protocol ? 'https://' : 'http://') +'thesite.com/api/widgets/tghd/pages.css">');    
    });

上面的代码是我用来将样式表添加到文档中的。代码检查器显示代码已添加，但控制台未显示浏览器已请求文档且样式未生效。

如何将样式表添加到已加载的文档并使其生效。

顺便提一句。如果重要的话，我会将此代码用于小部件，因此我将在多个域中使用。

预先感谢您的任何帮助！

Answer 1

尝试这个：

(function () {
    var li = document.createElement('link');
    li.type = 'text/css';     
    var href='http://' + 'thesite.com/api/widgets/tghd/pages.css';
    li.setAttribute('href', href);
    var s = document.getElementsByTagName('head')[0];
    s.appendChild(li, s);
})();

Answer 2

好的，经过几次测试，我终于弄清楚发生了什么。此原始代码由：@Vicky Gonsalves 提供

    var li = document.createElement('link');
    li.type = 'text/css';     
    var href=('https:' == document.location.protocol ? 'https://' : 'http://') +'thesite.com/api/widgets/pages.css';
    li.setAttribute('href', href);
    li.setAttribute('rel','stylesheet');
    var s = document.getElementsByTagName('head')[0];
    s.appendChild(li, s);

我对此所做的更改是：

• 我添加了 http 和 https 开关以帮助处理不同的连接类型
• 添加属性 li.setAttribute('rel','stylesheet'); <--我相信这解决了问题。