javascript - 通过 jquery 追加 css 文件，但 css 文件不起作用

Question

我有一个 Jquery 代码附加了 Css 和 Js 文件来创建带有 Owlcarousel 的横幅 slider 。

jquery 代码已附加到 html 中。函数 .owlCarousel() 工作正常，但 css 不行。在控制台中，它只GET owl.carousel.js 文件。

我发现最喜欢的是 this我已经尝试过了，但算不上成功。

查询

$(document).ready(function(){
        var u = document.createElement("link");
        u.type = "text/css";
        u.href = "https://myurl/OwlCarousel/dist/assets/owl.carousel.css";
        $("#lookbookslider-2").append(u);

        var t = document.createElement("script");
        t.type = "text/javascript";
        t.src = "https://myurl/OwlCarousel/dist/owl.carousel.js";
        $("#lookbookslider-2").append(t);
        $.getScript("https://myurl/OwlCarousel/dist/owl.carousel.js");

  $("#lookbookslider-2").append("html here");

});

我无权访问 html 文件。我只能使用我的 js 文件。如何使 css 文件正常工作？或者我必须直接附加所有样式？

Answer 1

你错过了 rel来自 link 的属性属性。另请注意 type不需要。试试这个:

var u = document.createElement("link");
u.rel = "stylesheet";
u.href = "https://myurl/OwlCarousel/dist/assets/owl.carousel.css";
$("#lookbookslider-2").append(u);

但是值得注意的是，如果您使用 jQuery 来创建 <link />，这可以得到简化。元素，您还应该将新样式表引用附加到 head :

var $link = $('<link />', {
  rel: 'stylesheet',
  href: 'https://myurl/OwlCarousel/dist/assets/owl.carousel.css'
}).appendTo('head');

最后，请注意在运行时附加样式表有点反模式。如果您想让页面更有效率，我建议您使用 CSS 和 JS 的捆绑和缩小，然后在页面加载时通过 HTML 包含所有必需的引用。