在目标页面加载完成之前添加样式元素

Adding a style element before the target page has finished loading

本文关键字：添加 样式 元素 目标 加载      更新时间：2023-09-26

我正在构建一个用户脚本，为了避免在页面渲染完成后用户脚本编辑页面样式时出现可怕的"抖动"效果，我试图在页面加载时进行编辑。

通过将规则插入到预先存在的样式对象中来完成此操作，效果如预期
http://pastebin.com/NNjLjKA5。。。等待样式对象存在，然后向其添加新样式。

然而，当我试图创建一个新的样式对象来插入规则时，我遇到了奇怪的行为。。。

// ==UserScript==
// @name           script
// @include        *
// @run-at document-start
// ==/UserScript==
// Add style rules while page is loading (to prevent jumping)
function addStyleRules(){
    // Check if stylesheets exist yet, if not try again in a bit
    if( !document.styleSheets[0] ) return setTimeout( addStyleRules,1 );
    // Get/create stylesheet element (if not already created)
    if( !document.querySelector( 'style[title=new_stylesheet]' ) ){
        var css = document.createElement( 'style' );
        css.type = "text/css";
        document.head.appendChild( css );
        css.title = 'new_stylesheet';
    }
    // Get stylesheet object
    var ss;
    for(i in document.styleSheets )
        if( document.styleSheets[i].title == 'new_stylesheet' )
            ss = document.styleSheets[i];
    // Add style rules
    if(ss.addRule)
        ss.addRule( '*','background-color:black',0);
    else
        ss.insertRule('*{background-color:black}',0);
    //debug
    console.log( 'page loading', ss, new Date().getTime() );
}
addStyleRules();
// Page has finished loading
document.addEventListener('DOMContentLoaded',function(e){
    // Get stylesheet object
    var ss;
    for(i in document.styleSheets )
        if( document.styleSheets[i].title == 'new_stylesheet' )
            ss = document.styleSheets[i];
    //debug
    console.log('page loaded', ss, new Date().getTime() );
});


这个脚本应该创建一个新的样式元素，在"document.styleSheets"中找到新的样式对象，然后应用一个新规则。

正如第一个日志事件所观察到的那样，它似乎做得很好。但是，一旦页面完成加载，新的样式对象就不再存在（即使样式元素存在于DOM中）。

所以，是的，我的问题是…
新创建的样式表对象在创建、成功应用新规则和触发"DOMContentLoaded"事件之间发生了什么？

  • 浏览器为Chrome 16.0.912.77

几件事：

  1. 对于样式替代，不要重新发明轮子使用时尚扩展插件它允许快速、轻松地更改和共享/重用样式。userstyles.org.上已经开发了无数种风格

  2. 如果您想在脚本中使用它，请避免使用样式表和addRule()格式。只需使用脚本的清单添加CSS：

    1. 用您的更改创建一个CSS文件，例如：
      * {background-color:lime!important;}
      并将其放在与脚本的JS相同的文件夹中
    2. 在包含CSS文件的清单文件中添加一行。例如：
      "css": [ "myCSS.css" ],
    3. 有关脚本位置和清单文件的详细信息，请参阅此答案

  3. 您当前的脚本有效，但显然没有给出您想要的结果，因为脚本设置的规则（background-color:black）被后来的CSS否决了。

    1. 使用!important关键字可以阻止大多数（但不是所有）以后的CSS规则具有优先权。例如：

      if (ss.addRule)
    ss.addRule ('*', 'background-color:black!important;', 0);
else
    ss.insertRule ('*{background-color:black!important;}', 0);

      在您的情况下，这可能是您所需要的全部内容，但请参阅第1点和第2点。）

    2. 正在针对通用选择器（*）设置规则。这意味着更具体的规则可能会覆盖它。因此，你可能需要更具体，例如：body {background-color:lime!important;}，才能坚持这些更改
相关文章：