Добавление элемента стиля до того, как целевая страница закончила загрузку

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()); 
}); 

Этот сценарий должен создать новый элемент стиля, найти новый style в документе document.styleSheets, а затем применить новое правило.

Кажется, что это прекрасно, что наблюдается при первом событии журнала. Однако, как только страница закончила загрузку, новый объект стиля больше не существует (хотя элемент стиля присутствует в DOM).

Так что да, мой вопрос ...
Что происходит с вновь созданным объектом таблицы стилей между ними он создается, имея новое правило успешно применяется, и событие «DOMContentLoaded» стрельба?

• Браузер Chrome 16.0.912.77

Answer 1

Несколько вещей:

1. Для переопределения стиля, не изобретать колесо. Использование the Stylish extension. Позволяет быстро, легко изменять и совместно использовать/повторно использовать стили. Существуют два стили стилей, которые уже разработаны на уровне userstyles.org.

2. Если вы хотите, чтобы это было в скрипте, избегайте всех этих таблиц стилей и addRule() rigamarole. Просто добавьте CSS, используя манифест скрипта.:

   1. Создайте файл CSS с изменениями, EG:
      * {background-color:lime!important;}
      и поместить его в ту же папку, JS вашего скрипта.
   2. Добавить строку в файл манифеста, содержащий файл CSS. EG:
      "css": [ "myCSS.css" ],
   3. Дополнительную информацию о местах расположения сценариев и файле манифеста см. В разделе this answer.
      
      

3. Ваш текущий скрипт работает, но, видимо, не дает желаемых результатов, так как правило, что наборы скриптов (background-color:black) в настоящее время преодолеваются позже CSS.

   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;}, чтобы получить изменения.