Question

我想知道是否可以更改已加载文档的样式表链接，然后等到新css加载，然后运行相应的js代码

感谢任何建议

Answer 1

HTML：

<link id="mystylesheet" href="/path/to/css.css" />

代码：

$("#mystylesheet").load(function(){
  //Your javascript
}).attr("href", "/new/path/to/css.css");

这将替换您当前的CSS，并在获取新的CSS文件后执行.load()处理程序中的任何代码。

Answer 2

@ahren几乎是正确的。但是，当css文件通过动态更改链接元素上的href完成加载时使用回调似乎不适用于大多数移动设备。

而是尝试使用load直接将样式注入样式元素..最终得到大多数现代浏览器的支持，包括移动浏览器

更新以包括对IE 8的支持;注意这需要你在你的css中注入一个虚拟规则以验证何时加载了css（在这种情况下使用body {ready：true;}）

css

body {ready:true;}
...

HTML

<style id="your-style-element"></style>

的javascript

if (document.createStyleSheet) {

    //Wait for style to be loaded
    var wait = setInterval(function(){
      //Check for the style to be applied to the body
      if($('body').css('ready') === 'true') {
        clearInterval(wait);

        //CSS ready
      }
    }, 300);

    document.createStyleSheet(url);
} else {
    //Dynamically load the css for this doc
    $("#your-style-element").load(url,function(){

       //CSS ready
    });
}

Answer 3

试试这个男人：http://forum.jquery.com/topic/loading-stylesheets-on-the-fly

或：http://www.rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx 或 Changing a stylesheet using jQuery

希望它适合原因:)

<强>代码

var link = $("<link>");
link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: <your CSS file url>
});
$("head").append( link );

Answer 4

你可以试试plug-in我为此案专门写的。

不确定.load()的{{1}}方法，它似乎不是跨浏览器的。只有IE支持链接元素上的jQuery事件，afaik。

Answer 5

这是我写的一篇关于47 LOC的完美作品：

https://gist.github.com/aleclarson/ac6456c75edae9fe9d9b6938142a065b

它使用rm -rf ~/Library/Containers/com.docker.docker/Data/*检查每个帧上的requestAnimationFrame，直到每个给定的URL片段都已加载。

示例：

document.styleSheets

纯粹的javascript！

Answer 6

在https://stackoverflow.com/a/35644406/20774，TeaCoder对这个问题有很好的答案。

基本上使用元素onload方法，并在样式加载后放置要发生的逻辑。

这是使用内置DOM功能执行此操作的好方法，但回调语法有点尴尬。这是我用Promises做到的方式：

const createOnLoadPromise = (htmlElement) =>
  new Promise((resolve) => {
    htmlElement.onload = resolve;
  });
const link1 = document.head.appendChild(createStyleLink(href1));
const link2 = document.head.appendChild(createStyleLink(href2));
await Promise.all([
  createOnLoadPromise(link1),
  createOnLoadPromise(link2),
]);
// do whatever you need to do after the await

更改css链接并等到新css加载

6 个答案: