Как правильно использовать CSSStyleSheet.insertRule()?

Я не могу понять, где я ошибаюсь: /. Когда я запускаю этот код, все, что я получаю, это пустой элемент. Кажется, я не могу заставить метод insertRule делать что-либо (даже не вызывать ошибки). Я что-то упускаю?Как правильно использовать CSSStyleSheet.insertRule()?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
<script> 
    var sheet = (function() { 
     // Create the <style> tag 
     var style = document.createElement("style"); 

     // WebKit hack 
     style.appendChild(document.createTextNode("")); 

     // Add the <style> element to the page 
     document.head.appendChild(style); 

     return style.sheet; 
    })(); 
    sheet.insertRule("\ 
     #gridContainer {\ 
      width: 100%;\ 
      height: 100%;\ 
     }\ 
    ", 0); 
</script> 
</body> 
</html>

источник

2015-03-08 klinore

Кажется, что работает на Firefox и Chromium. – Oriol

Я получаю пустой тег в Firefox и Chromium ... Я редактировал свой вопрос, чтобы показать весь код, который я запускаю. Не уверен, что пойдет не так ... – klinore

Это немного сбивает с толку, но делает ваш код на самом деле работает, это просто, что вы не можете увидеть вставленные правила в XML дерево возвращается.

Чтобы убедиться, что код работает, есть два теста вы можете сделать:

var style = (function() { 
 
    // Create the <style> tag 
 
    var style = document.createElement("style"); 
 

 
    // WebKit hack 
 
    style.appendChild(document.createTextNode("")); 
 

 
    // Add the <style> element to the page 
 
    document.head.appendChild(style); 
 
    
 
    console.log(style.sheet.cssRules); // length is 0, and no rules 
 

 
    return style; 
 
})(); 
 
style.sheet.insertRule('.foo{color:red;}', 0); 
 
console.log(style.sheet.cssRules); // length is 1, rule added

<p class="foo"> 
 
    I am some text 
 
</p>

Run выше фрагмент кода, и вы можете увидеть, что правило CSS не распространяется. И свойство cssRules изменяется также и в консоли.

Это часто отмечается, когда расширения браузера генерируют пользовательские таблицы стилей, добавленные в DOM, и при их отладке они отображаются в виде пустых таблиц стилей в инспекторе.

источник

2015-03-08 19:36:32

Ha! Я должен был подумать, чтобы проверить это. Поскольку он оказался пустым в инспекторе, я сделал предположение, что он не применяется. Спасибо Awal :) – klinore

@ user2522373 не проблема :) В следующий раз помните, что консоль - молчаливый свидетель всего. –

Странно, что текст не появляется внутри элемента, как и следовало ожидать. Хотя я вижу, что он работает независимо от моих случаев использования. – trusktr

Эта версия основана на ответе Авала и Полностью Pwn CSS с Javascript от web archive. Параметр id полезен для доступа к styleSheet с getElementById, а параметр media является опционным и не соответствует экрану. Я возвращаю styleSheet.sheet, это только мои предпочтения.

function createStyleSheet (id, media) { 
    var el = document.createElement('style'); 
    // WebKit hack 
    el.appendChild(document.createTextNode('')); 
    el.type = 'text/css'; 
    el.rel = 'stylesheet'; 
    el.media = media || 'screen'; 
    el.id = id; 
    document.head.appendChild(el); 
    return el.sheet; 
}

источник

2016-04-22 19:38:45

Как правильно использовать CSSStyleSheet.insertRule()?

ответ

Смежные вопросы