Я создал версию, которая ищет все таблицы стилей и возвращает совпадения в качестве объекта key / value. Вы также можете указать startWith для соответствия дочерним стилям.
getStylesBySelector('.pure-form-html', true);
возвращает:
{
".pure-form-html body": "padding: 0; margin: 0; font-size: 14px; font-family: tahoma;",
".pure-form-html h1": "margin: 0; font-size: 18px; font-family: tahoma;"
}
из:
.pure-form-html body {
padding: 0;
margin: 0;
font-size: 14px;
font-family: tahoma;
}
.pure-form-html h1 {
margin: 0;
font-size: 18px;
font-family: tahoma;
}
Код:
/**
* Get all CSS style blocks matching a CSS selector from stylesheets
* @param {string} className - class name to match
* @param {boolean} startingWith - if true matches all items starting with selector, default = false (exact match only)
* @example getStylesBySelector('pure-form .pure-form-html ')
* @returns {object} key/value object containing matching styles otherwise null
*/
function getStylesBySelector(className, startingWith) {
if (!className || className === '') throw new Error('Please provide a css class name');
var styleSheets = window.document.styleSheets;
var result = {};
// go through all stylesheets in the DOM
for (var i = 0, l = styleSheets.length; i < l; i++) {
var classes = styleSheets[i].rules || styleSheets[i].cssRules || [];
// go through all classes in each document
for (var x = 0, ll = classes.length; x < ll; x++) {
var selector = classes[x].selectorText || '';
var content = classes[x].cssText || classes[x].style.cssText || '';
// if the selector matches
if ((startingWith && selector.indexOf(className) === 0) || selector === className) {
// create an object entry with selector as key and value as content
result[selector] = content.split(/(?:{|})/)[1].trim();
}
}
}
// only return object if we have values, otherwise null
return Object.keys(result).length > 0 ? result : null;
}
Я использую это в производстве как часть проекта pure-form . Надеюсь, что это поможет.