I have defined a set of CSS classes in app.css:
.eventcolor-1{background:rgba(249, 115, 0);}
.eventcolor-2{background:rgba(14, 48, 71, 0.99);}
.eventcolor-3{background:rgba(16, 130, 140, 0.99);}
.eventcolor-4{background:rgba(41, 91, 167, 0.99);}
.eventcolor-5{background:rgba(148, 172, 60, 0.99)}
.eventcolor-6{background:rgba(252, 195, 20, 0.99);}
In jQuery, I am looking for a method to extract all the .eventcolor-* classes that are currently available and add them to an array.
An existing solution for this issue can be found at:
function getClassNamesByPattern(pattern) {
var pattern = "eventcolor-*";
var selectors = {};
for (var i = 0; i < document.styleSheets.length; i++) {
var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
for (var x = 0; x < classes.length; x++) {
if (undefined !== classes[x].selectorText && null !== classes[x].selectorText.match(new RegExp('\\.' + pattern.replace(/([^\s])\*, '$1[^ ]+'), 'g'))) {
selectors[classes[x].selectorText] = classes[x].selectorText;
}
}
}
return Object.keys(selectors);
}
However, this approach triggers a Security Error in Firefox since it scans through unnecessary CSS files. All I want is to target my custom style file app.css.
SecurityError: The operation is insecure.
Is there a secure way to limit the search to only a specified CSS file?