Question

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

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

虽然这样可以正常工作（即新添加的样式表中的类的元素已正确装饰），但我无法使用CSS查询该样式表中的jQuery属性：I have created a jsFiddle to show the problem < / p>

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

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

Answer 1

如果你在“加载”处理程序中进行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'));    
      }
  }));

Fiddle, updated.

Answer 2

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

可以在此处找到解决此问题（和解决方案）的更好方法： jQuery event that triggers after CSS is loaded?

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

2 个答案: