当CSS文件手动加载时，无法查找元素的CSS属性

Question

我将在页面加载后用以下代码加载一个CSS样式表：

$("head").append($("<link>", {
    rel: "stylesheet",
    href: 'http://cdn.sstatic.net/stackoverflow/all.css',
    type: "text/css"
}));

虽然这很好(例如，带有来自新添加样式表的类的元素被正确修饰)，但我无法使用jQuery：显示出这个问题从该样式表查询该样式表中的显示出这个问题属性。

如何使用CSS jQuery**)查找元素的** CSS 属性，哪些类对应于页面加载后添加的样式表？

PS:我正在经历Firefox 14.0.1的问题，而不是Chrome 21.0.1180.79的问题。

Answer 1

如果您在"load“处理程序中执行console.log()调用，它可以正常工作：

$("head").append($("<link>", {
    rel: "stylesheet",
    href: 'http://cdn.sstatic.net/stackoverflow/all.css',
    type: "text/css",
    load: function() {
      console.log($('#test1').css('color'));
      console.log($('#test2').css('color'));
      console.log($('#test3').css('color'));
      console.log($('#test4').css('color'));    
      }
  }));

小提琴，更新。

Answer 2

这个问题很可能是由于在执行console.logs时样式表没有被完全加载。与使用jquery动态地向页面呈现图像类似，样式表是一种高级资源，您需要考虑浏览器下拉并应用样式表所需的时间，然后才能执行利用该功能的代码。

解决这个问题的更好方法(以及解决方案)可以在这里找到：加载CSS后触发的jQuery事件？