Click here to Skip to main content
15,892,839 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm developing a Asp.net MVC application with bootstrap where I'd like a user to select an icon based on a list of the glyphicons that bootstrap provides.

Is there some JQuery method that I can query what css classes are available to the current page?

What I have tried:

I haven not tried anything yet
Posted
Updated 4-Aug-17 4:53am

1 solution

There are ways to query the rules from the loaded stylesheets:
jquery - Listing known CSS classes using Javascript - Stack Overflow[^]
JavaScript
function listAllCssSelectors(){
    var result = [];
    
    var sheets = document.styleSheets, sheetCount = sheets.length;
    for(var i = 0; i < sheetCount; i++) { 
        try {
            var rules = document.styleSheets[i].cssRules, ruleCount = rules.length;
            for (var j = 0; j < ruleCount; j++) {
                var selector = rules[j].selectorText;
                if (selector) {
                    result.push(selector);
                }
            }
        }
        catch (e) {
        }
    }
    
    return result;
}

HOWEVER, if any stylesheet is loaded from a different domain - for example, if you're using a CDN - then you can't access its rules. The try..catch block above will swallow the exception, but the method won't return any rules for those external stylesheets.

For example, running the method on CodeProject returns a grand total of three selectors, because most of the stylesheets are hosted on a different domain.

As there are only 263 Glyphicons in the current version of Bootstrap, it would probably be easier to create a static list.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900