Question

我正在构建一个用户脚本并避免可怕的“抖动”效果，因为一旦页面完成渲染，用户脚本就会编辑页面的样式我正在尝试在页面加载时进行此操作。

通过将规则插入到预先存在的样式对象中来执行此操作可以正常工作.... 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

Answer 1

有几件事：

对于样式覆盖，请勿重新发明轮子。 使用the Stylish extension。它允许快速，轻松地更改以及共享/重用样式。已经在userstyles.org开发了数以万计的样式。
如果你想在脚本中使用它，请避免使用所有样式表和addRule() rigamarole。只需使用脚本的清单添加CSS。：
1. 使用您的更改创建一个CSS文件，EG：
  * {background-color:lime!important;}
  并将其放在与脚本JS相同的文件夹中。
2. 在包含CSS文件的清单文件中添加一行。 EG：
  "css": [ "myCSS.css" ],
3. 有关脚本位置和清单文件的详细信息，请参阅this answer
您当前的脚本，但显然没有提供您想要的结果，因为脚本设置的规则（background-color:black）被后来的CSS否决了。< / p>
1. 使用!important关键字阻止大多数（但不是全部）CSS规则优先使用。 EG：
```
if (ss.addRule)
    ss.addRule ('*', 'background-color:black!important;', 0);
else
    ss.insertRule ('*{background-color:black!important;}', 0);
```
  在您的情况下，这可能就是您所需要的，但请参阅第1点和第2点。;）
2. 正在针对通用选择器（*）设置规则。这意味着more-specific rules may override it。因此，您可能需要更具体，EG：body {background-color:lime!important;}以使更改成为现实。

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

1 个答案: