2

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

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

虽然这很好用（即，新添加的样式表中带有类的元素已正确装饰），但我无法CSS使用以下方法查询该样式表中的属性jQuery：我已经创建了一个jsFiddle来显示问题

我如何（理想情况下jQuery）查找与CSS页面加载后添加的 CSS 样式表相对应的元素的属性？

PS：我遇到了问题，Firefox 14.0.1但不是Chrome 21.0.1180.79。

4

2 回答 2

4

如果您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'));    
      }
  }));

小提琴，更新了。

于 2012-08-19T15:26:56.527 回答
2

问题可能是由于在您执行 console.logs 时样式表尚未完全加载。与使用 jquery 将图像动态呈现到页面类似，样式表是一种外部资源，您需要考虑浏览器在执行所利用的代码之前下拉并应用样式表所花费的时间。

可以在此处找到解决此问题的更好方法（和解决方案）： 加载 CSS 后触发的 jQuery 事件？

于 2012-08-19T15:32:43.107 回答