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

Unable to lookup elements' CSS properties when CSS file loaded manually

本文关键字：CSS 加载 文件 属性 查找 元素      更新时间：2023-09-26

页面加载后，我正在加载一个CSS样式表，其中包含以下代码：

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

尽管这很好（即，新添加的样式表中具有类的元素得到了适当的修饰），但我无法使用jQuery从该样式表中查询CSS属性：我已经创建了一个jsFiddle来显示问题

我（最好使用jQuery）如何查找元素的CSS属性？哪些类对应于页面加载后添加的CSS样式表

PS：我遇到了Firefox 14.0.1的问题，但Chrome 21.0.1180.79没有。

如果您在"加载"处理程序中执行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，更新。

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

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

相关文章：