JavaScript: манипулирование текстом StyleSheet

Question

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

Можно ли читать и писать весь текст таблицы стилей? В частности, я хочу получить доступ к таблицам стилей, прикрепленных с помощью тега link. Я не нашел ничего через поисковые системы, и статьи, документирующие таблицы стилей (например, статья MDN), похоже, не упоминают об этом.

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

(я бы предпочел решение без jQuery, даже если мне нужно сделать работу с перекрестным браузером. К счастью, IE8 не проблема).

Благодаря

Answer 1

Это возможно, если вы захватите <style> элемент с помощью какой-то метод запроса, а не доступ к ней через document.styleSheets.

var pre = document.querySelector('pre'); 
 
var styleSheet = document.querySelector('style'); 
 
pre.innerText = styleSheet.innerText;

/* Voila! */ 
 
#test { 
 
    position: fixed; 
 
}

<pre></pre>

Чтобы получить доступ к содержимому внешних стилей, единственный способ сделать это с помощью AJAX. Если у вас есть доступ к $.ajax функции JQuery, это выглядит примерно так:

var styleSheet = document.querySelector('style'); 
$.ajax({ 
    url: styleSheet.href, 
    success: function(contentsOfStyleSheet) { 
    // do stuff 
    } 
}); 

Это даст вам доступ к содержимому, но вы не сможете напрямую управлять содержимым страницы таким образом. Единственный способ изменить правила внешнего файла CSS - это использовать API document.styleSheets, о котором вы упомянули.