Получите CSS-правила в javascript-переменную

Question

Я хочу, чтобы иметь возможность выбирать куски CSS-правил с помощью JavaScript или jQuery и получать их в переменную, в основном в виде предварительно отформатированного текста, который вы ожидаете в стиле-листе.

В идеале мы бы тщательно прокомментировали наши стили CSS и разместили их просто в теге на странице html. JavaScript найдет конкретный комментарий, который обертывает правила в теге <style> на странице и копирует эти правила в переменную как текст для последующего использования.

/* CSS Rules */ 

.example{ 
    font-size: 1em; 
    color:blue; 
} 

/* end */ 

В этом случае скрипт будет найти строку /* CSS Rule */, а затем выбрать все строки под ней, пока она не достигнет нагрузочного комментарий /* end */

Любые идеи? Я искал подходящую для решения проблему, но думаю, что это довольно необычная вещь, и вам трудно найти какие-либо указатели.

Answer 1

Welp ... вы всегда можете иметь идентификатор на своем стиль тег как

<style id="css">div{ background-color:red; }</style> 

А затем захватить содержимое с JQuery

var cssText = $('#css').html(); 

Но всем этим делом сделал бы Аду Лавлейс крик, возможно, вы можете найти другой способ удовлетворить ваши требования?

Answer 2

Это немного Hacky-иш, но вот один из способов сделать это -

Извлечение текста (использование регулярных выражений или IndexOf) - если у вас есть текстовый блок, создайте данных URI из него:

var cssURL = "data:text/css;charset=utf8," + encodeURIComponent(cssTxt); 

создать элемент ссылки и установить отн в таблицу стилей (браузер может иметь дело с типом):

var link = document.createElement("link"); 
link.rel= "stylesheet"; 
link.href = cssURL; 

Добавить в заголовок для загрузки и синтаксического анализа:

document.getElementsByTagName("head")[0].appendChild(link); 

Пример

только зеленый должен показать -

var css = ".s1 {border:1px solid red} " + 
 
      "/* start */ .s2 {border:1px solid green} /* end */ " + 
 
      ".s3 {border:1px solid blue}"; 
 

 
// get css text and convert to data-uri 
 
var start = css.indexOf("/* start */"); 
 
var end = css.indexOf("/* end */", start); 
 
var cssTxt = css.substring(start, end); 
 
var cssURL = "data:text/css;charset=utf8," + encodeURIComponent(cssTxt); 
 

 
// create link element and add to header 
 
var link = document.createElement("link"); 
 
link.rel= "stylesheet"; 
 
link.href = cssURL; 
 

 
document.getElementsByTagName("head")[0].appendChild(link);

<div class="s1">Class s1 - ignored</div> 
 
<div class="s2">Class s2 - should have green border</div> 
 
<div class="s3">Class s3 - ignored</div>