Listing Known CSS Classes Using JavaScript

Listing known CSS classes using Javascript

This will show all rules defined in the stylesheets.

var allRules = [];
var sSheetList = document.styleSheets;
for (var sSheet = 0; sSheet < sSheetList.length; sSheet++)
{
    var ruleList = document.styleSheets[sSheet].cssRules;
    for (var rule = 0; rule < ruleList.length; rule ++)
    {
       allRules.push( ruleList[rule].selectorText );
    }
}

The thing, though, is that it includes all rules regardless of being class or tag or id or whatever..

You will need to explain in more detail what you want to happen for non class rules (or combined rules)

Is there a way to list all available css classes for a web page?

A bit late but ...

  for (let link of document.querySelectorAll("link, style")) {
    try {
      if (!link.sheet) {
        console.warn("Warning:", "Property 'sheet' is not set on element", link)
      } else
        for (let rule of link.sheet.rules) {
          console.log(rule.selectorText)
        };
    } catch (e) {
      console.warn("Warning:", e.message, ". Try set crossorigin='anonymous' on element", link)
    }
  };

or in the Chrome DevTool window (F12), find the "Elements", then "Styles", tab. On the right side of the "filter" text-box there is a ".cls" option. Click it and an "add new class" input should appear. Focus that input and hit Ctrl + Space. A pick list of all class styles in the current opened document should appear.

It looks something like this:

How to get all CSS classes of an element?

No need to use jQuery for it:

var classList = this.className.split(' ')

If you for some reason want to do it from a jQuery object, those two solutions work, too:

var classList = $(this)[0].className.split(' ')
var classList = $(this).prop('className').split(' ')

Of course you could switch to overkill development mode and write a jQuery plugin for it:

$.fn.allTheClasses = function() {
    return this[0].className.split(' ');
}

Then $(this).allTheClasses() would give you an array containing the class names.

How to make list of all classes in the page using jQuery?

jQuery has an attribute selector - choose only elements which have class atribute :)
Then split class attribute string (for cases like class="one two") and add them to array (dont forget to check if class is not empty or isnt already in the array. Use this.valueOf() for checking and saving the string :)

var classes = [];
$('[class]').each(function(){
    $($(this).attr('class').split(' ')).each(function() { 
        if (this.length>0 && $.inArray(this.valueOf(), classes) === -1) {
            classes.push(this.valueOf());
        }    
    });
});
console.log("LIST START\n\n"+classes.join('\n')+"\n\nLIST END");

JSFiddle link : http://jsfiddle.net/MWJKL/

Print list of attributes from a CSS class

If you get a reference to an element through JavaScript you can generally only get CSS properties that have been set through inline CSS using the style-attribute of the element. Properties applied through CSS can not be read through the element as properties of that element.

You can however use window.getComputedStyle() within your loop to get the final computed CSS that has been applied to the element.

In your case it would be something like:

var toto = document.getElementsByClassName('toto');
if (toto) {
   for (int i; i < toto.length; i++)
      // Log the height of each element
      console.log(getComputedStyle(toto[i], null).getPropertyValue("height"));
   }
}

Notice that the browser-support is somewhat limited (IE9+).

How can you determine if a css class exists with Javascript?

This should be possible to do using the document.styleSheets[].rules[].selectorText and document.styleSheets[].imports[].rules[].selectorText properties. Refer to MDN documentation.

How do you read CSS rule values with JavaScript?

Adapted from here, building on scunliffe's answer:

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {        
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }         
    }
    return cssText;
}

alert(getStyle('.test'));

Applying a CSS class on click to a list item?

Adding an event listener to every single list item is considered to be bad practice. Instead you can use one click event to handle all your list items.

Instead do something like this

const songSelects = document.getElementById('set-1'); // This is your UL element

function changeColor(e) {
  e.target.classList.add('song-selection');
}

songSelects.addEventListener('click', changeColor);

This example will add an event listener to your UL element which will capture every clicked on list item within the list. You can access the actual item that has been clicked on through the event object, specifically its target property. This will then add your class to the individual list item that was clicked.

This process is called event delgation and if you'd like, you can read more about it here https://javascript.info/event-delegation

More detail about why you should use event delgation rather than adding a listener to every item. https://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c

---

Related Topics