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'）; ＆lt; - 我认为解决了这个问题。

使用JS将样式表添加到文档中

2 个答案: