草庐IT

javascript - 何时将样式表添加到 document.styleSheets

coder 2024-05-14 原文

我正在尝试使用 javascript 动态添加 css 样式表规则，类似于示例 2 here .

它大部分时间都有效，但似乎有一种竞争条件使其有时在(至少)Chrome(15.0.874 和 17.0.933)中失败。当缓存为空(或已被清除)时很少发生。

以下是我能够缩小范围的内容。首先，我通过将外部样式表附加到 <head> 来加载它。然后我创建一个新的样式表(我将在其中添加规则)。然后我打印 document.styleSheets 的长度(立即和 1 秒后)。

$(function() {
    // it doesn't happen if this line is missing.
    $("head").append('<link rel="stylesheet" type="text/css"'+
                     'href="/css/normalize.css" />');

    var stylesheet = document.createElement("style");
    stylesheet.setAttribute("type", "text/css");
    document.getElementsByTagName('head')[0].appendChild(stylesheet);

    var b = $('body');
    b.append(document.styleSheets.length).append('<br/>');
    setTimeout(function() {
        b.append(document.styleSheets.length).append('<br/>');
    }, 1000);
});

(在 http://jsfiddle.net/amirshim/gAYzY/13/ 上玩)

缓存清空时，有时会打印2然后4 (jsfiddle 添加了它自己的 2 个 css 文件)，这意味着它不会将任何一个样式表添加到 document.styleSheets立即...但可能会等待外部文件加载。

这是预期的吗？

如果是，是Example 2 on MDN (以及其他许多人)坏了？从第 27 行开始:

var s = document.styleSheets[document.styleSheets.length - 1];

可能会用 document.styleSheets.length == 0 进行评估

请注意，当我不首先加载外部 CSS 文件时，不会发生这种情况。

最佳答案

如果 JavaScript 在 CSS 下方的页面中(几乎总是如此)，HTML 解析器必须等待 JS 执行，直到 JS 和 CSS 完全加载和解析，因为 JS 可能会请求样式信息(仅限 Chrome尽管脚本实际执行此操作时会执行此操作)。 这在几乎所有情况下都有效地阻止了外部 CSS 的加载。 当您稍后通过 JavaScript 插入它们或页面中没有 JS(或 JS 以非阻塞方式加载)时，CSS 会异步加载，这意味着它们会在不阻塞 DOM 解析的情况下加载和解析。 因此，documents.stylesheets 计数仅在工作表位于 DOM 内后才会更新，并且仅在其完全加载和解析后才会发生。

在这种情况下，可能会涉及一些时间差异。 考虑到大多数浏览器只有有限数量的管道用于加载数据(有些只有两个，如 IE6，大多数有 6 个，有些甚至有 12 个，如 IE9)，样式表的加载被添加到要加载的队列的末尾. 浏览器仍在加载内容，因为您在 DOMReady 上调用函数。 这会导致样式表在一秒钟后未完全加载和解析，因此不会影响 document.stylesheets.length。

我在网络上遇到的所有样式表示例都假定 dom 已完全解析和加载。 OffDOM 样式表甚至不允许插入或检查规则，因为它们可以有 @import 规则并且这些规则必须从外部加载，所以对于浏览器来说，很难确定何时可以安全地与表单交互，除非它们'完全加载并解析。 OffDOM 样式表确实公开了一个空的工作表属性，但在将工作表添加到 DOM 之前不会让您与之交互。

我一直发现动态插入样式表并执行该表单中的所有更改并单独保留 document.stylesheets 更好。 这有很大的优势，当您覆盖具有相同特异性的样式时，您不会因为插入错误的工作表而遇到麻烦。 由于 document.stylesheets 是一个实时节点列表，document.stylesheets[ 2 ] 可以在您每次调用该函数时指向另一个工作表(除非存储在 var 中)。 所以我倾向于使用动态插入的工作表，并且只对该工作表进行操作。

关于javascript - 何时将样式表添加到 document.styleSheets，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8060429/

styleSheetsjavascriptdocumentcodejquerycssgoogle-chromestylesheet

有关javascript - 何时将样式表添加到 document.styleSheets的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  3. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  4. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  5. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  6. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  7. ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2

    我注意到类定义，如果我打开classMyClass，并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义，我仍然想要与类定义相同的行为，但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了，我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同，类似于super，但不一定是子类？ 最佳答案 我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca

  8. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  9. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  10. ruby-on-rails - 在 Ruby on Rails 中添加 boolean 列值 - 2

    我正在开发一个创建网络博客的RubyonRails项目。我希望将一个名为featured的boolean数据库字段添加到Post模型中。该字段应该可以通过我添加的事件管理界面进行编辑。我使用了以下代码，但我什至没有在网站上显示另一列。$railsgeneratemigrationaddFeaturedfeatured:boolean$rakedb:migrate我是RubyonRails的新手，非常感谢任何帮助。我的index.html.erb文件中的相关代码(views):FeaturedPost架构.rb:ActiveRecord::Schema.define(:version=>

随机推荐