Retrieve the names of all classes listed in the internal stylesheet

Question

Retrieve the names of all classes listed in the internal stylesheet

Is there a way to extract the names of all classes defined in an internal stylesheet using jQuery? For example, if I have the following internal stylesheet:

<style  id="custstyle" type="text/css">
            .column{
                font-size:13px;
                font-family:arial, helvetica, verdana, sans-serif;
                font-weight:normal;
                color:rgb(221, 221, 221);
                font-size:13px;
                font-family:arial, helvetica, verdana, sans-serif;
                font-weight:normal;
                color:rgb(221, 221, 221);
            }
        </style>

and calling $('#custstyle').html() or $('#custstyle').text() will return the entire CSS code as shown below:

.column{
                font-size:13px;
                font-family:arial, helvetica, verdana, sans-serif;
                font-weight:normal;
                color:rgb(221, 221, 221);
                font-size:13px;
                font-family:arial, helvetica, verdana, sans-serif;
                font-weight:normal;
                color:rgb(221, 221, 221);
            }

But what I actually want is to retrieve only the class name .column...

jquery css

Answer 1

Answer №1

In order to retrieve the CSS selectors, follow these steps:

let content = $('#custstyle').html();
while (content.indexOf('{') != -1) {
    alert(content.substring(0, content.indexOf('{')));
    content = content.substring(content.indexOf('}') + 1);
}

For a live demo, check out this Fiddle: http://jsfiddle.net/5gzxk/

Answer 2

In order to retrieve the CSS selectors, follow these steps:

let content = $('#custstyle').html();
while (content.indexOf('{') != -1) {
    alert(content.substring(0, content.indexOf('{')));
    content = content.substring(content.indexOf('}') + 1);
}

For a live demo, check out this Fiddle: http://jsfiddle.net/5gzxk/

Answer 3

Answer №2

An unconventional method for displaying all selectors in a style sheet is:

for(let i = 0; i < document.styleSheets.length; i++) {
   let stylesheet = document.styleSheets[i];
   for(let j = 0; stylesheet.cssRules && j < stylesheet.cssRules.length; j++) {
      let rule = stylesheet.cssRules[j];
      console.log(rule.selectorText);
   }
}

Answer 4

An unconventional method for displaying all selectors in a style sheet is:

for(let i = 0; i < document.styleSheets.length; i++) {
   let stylesheet = document.styleSheets[i];
   for(let j = 0; stylesheet.cssRules && j < stylesheet.cssRules.length; j++) {
      let rule = stylesheet.cssRules[j];
      console.log(rule.selectorText);
   }
}

Answer 5

Answer №3

Give this a try:

let elements = document.querySelectorAll('body *');
let uniqueClasses = [];
for (let element of elements) {
    for (let className of Array.from(element.classList)) {
        if (!uniqueClasses.includes(className)) {
            uniqueClasses.push(className);
        }
    }
}

Note: If you need to convert internal styles to inline CSS, consider using the following approach:

let elements = document.querySelectorAll('body *');
let classObject = {};
for (let i = 0; i < elements.length; i++) {
    let element = elements[i];
    let classesArray = Array.from(element.classList);
    classObject[i] = {
        node: element,
        classes: classesArray
    };
}

Answer 6

Give this a try:

let elements = document.querySelectorAll('body *');
let uniqueClasses = [];
for (let element of elements) {
    for (let className of Array.from(element.classList)) {
        if (!uniqueClasses.includes(className)) {
            uniqueClasses.push(className);
        }
    }
}

Note: If you need to convert internal styles to inline CSS, consider using the following approach:

let elements = document.querySelectorAll('body *');
let classObject = {};
for (let i = 0; i < elements.length; i++) {
    let element = elements[i];
    let classesArray = Array.from(element.classList);
    classObject[i] = {
        node: element,
        classes: classesArray
    };
}

Answer 7

Answer №4

There might be some potential in utilizing this information. If you are interested in obtaining the selectors, you can refer to the sheet property of the HTMLStyleElement:

var rules = $('#custstyle').prop('sheet').cssRules;
var selectors = $.map(rules, function(rule){
     return rule.selectorText;
});

The variable selectors now holds an array of selectors.

http://jsbin.com/iQEvuMeT/1/

If you wish to retrieve both the selectors and their specific styles:

var rules = $('#custstyle').prop('sheet').cssRules;
var results = $.map(rules, function(rule) {
    var o = {};
    $.each(rule.style, function(_, item) {
       o[item] = rule.style[item];
    }); 
    return { selector: rule.selectorText, styles: styles };
});

Now, the variable results consists of an array of objects. To apply inline styles to elements, you can utilize the css() method. Since it accepts an object, you can write the following code:

$.each(results, function(_, v) {
   $(v.selector).css(v.styles);
});

This will result in:

<div class="column" 
     style="font-size: 13px; font-family: arial, helvetica, verdana, sans-serif; font-weight: normal; color: rgb(221, 221, 221);">
</div>

Although it may initially seem unnecessary and repetitive, there could be scenarios where this approach proves beneficial!

Answer 8

There might be some potential in utilizing this information. If you are interested in obtaining the selectors, you can refer to the sheet property of the HTMLStyleElement:

var rules = $('#custstyle').prop('sheet').cssRules;
var selectors = $.map(rules, function(rule){
     return rule.selectorText;
});

The variable selectors now holds an array of selectors.

http://jsbin.com/iQEvuMeT/1/

If you wish to retrieve both the selectors and their specific styles:

var rules = $('#custstyle').prop('sheet').cssRules;
var results = $.map(rules, function(rule) {
    var o = {};
    $.each(rule.style, function(_, item) {
       o[item] = rule.style[item];
    }); 
    return { selector: rule.selectorText, styles: styles };
});

Now, the variable results consists of an array of objects. To apply inline styles to elements, you can utilize the css() method. Since it accepts an object, you can write the following code:

$.each(results, function(_, v) {
   $(v.selector).css(v.styles);
});

This will result in:

<div class="column" 
     style="font-size: 13px; font-family: arial, helvetica, verdana, sans-serif; font-weight: normal; color: rgb(221, 221, 221);">
</div>

Although it may initially seem unnecessary and repetitive, there could be scenarios where this approach proves beneficial!

Retrieve the names of all classes listed in the internal stylesheet

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using Bootstrap's fourth version grid system

The `div` element automatically starts on a new line rather than expanding vertically

Combine the text value from a textbox and the value from a checkbox into a single

Having trouble with the Ajax loop callback method functioning properly for each individual request

"Change opacity smoothly with the FadeToggle feature for a

Connect to dynamically generated div on separate page

Is it possible to create clickable titles in highcharts that also interact with bootstrap popovers?

Creating a div that expands to fill up the remaining height within a flex-child

Having difficulty retrieving JSON data using Jquery

What could be the reason that setting document.body.style.backgroundImage does not apply to the body element itself?

Bootstrap 5 utilizes an 8-column system specifically designed for tablets, while defaulting to a 12-column system for both desktop and mobile versions

"Is there a way to implement the functions of adding, editing, and deleting data in

Create dynamic cells for CSS grid using JavaScript

The canvas surpasses the boundaries of the grid layout

Display a div using Ajax by triggering a PHP function

The HTML elements may have identical heights, but visually, one appears larger than the other

Searching with Jquery Ajax

Is there a way to automatically trigger an Anthem.NET button click event upon page load in ASP.NET?

Creating lasting placeholder text with gaps between each word

Optimal practices for naming divs in XHTML/CSS