Retrieve the value of a CSS class property regardless of whether it is actively being utilized

Question

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

I am facing a dilemma where I need to determine the value of the 'width' property for a css class named 'foo' (example: ".foo { width:200px}" ).

However, there may not be an element with this class in the dom yet.

My goal is to retrieve this value using Javascript in order to calculate percentages for setting a detailed layout involving other divs.

While it seems unlikely, I believe having this capability would greatly enhance defining design and layout properties in CSS.

Is there any known method to achieve this without resorting to unconventional hacks like offscreen rendering of divs for querying class properties?

Possibly, a standard browser JavaScript library could be developed to address this matter - such as a document.styles object. In that case, my desired property could potentially be accessed from within JavaScript like so: "document.styles.foo.width" - How can I go about proposing this idea to the w3c?

javascript css

Answer 1

Answer №1

To avoid cluttering the document, one approach is to create a new element without adding it to the DOM.

Another, more streamlined solution in JavaScript involves iterating through stylesheets and their contents:

for (var i=0; i<document.styleSheets.length; i++) {
    var styleSheet = document.styleSheets[i];
    var cssRules = styleSheet.rules; // chrome, IE
    if (!cssRules) cssRules = styleSheet.cssRules; // firefox
    for (var ir=cssRules.length; ir-->0;) {
        var rule = this.cssRules[ir];
        if (rule.selectorText==".foo") {
              var width = parseInt(rule.style.getPropertyValue('width'), 10);
              // perform desired actions

        }
    }
}

This method proves efficient as you traverse through an unparsed structure.

Answer 2

To avoid cluttering the document, one approach is to create a new element without adding it to the DOM.

Another, more streamlined solution in JavaScript involves iterating through stylesheets and their contents:

for (var i=0; i<document.styleSheets.length; i++) {
    var styleSheet = document.styleSheets[i];
    var cssRules = styleSheet.rules; // chrome, IE
    if (!cssRules) cssRules = styleSheet.cssRules; // firefox
    for (var ir=cssRules.length; ir-->0;) {
        var rule = this.cssRules[ir];
        if (rule.selectorText==".foo") {
              var width = parseInt(rule.style.getPropertyValue('width'), 10);
              // perform desired actions

        }
    }
}

This method proves efficient as you traverse through an unparsed structure.

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

Answer №1

Similar questions

Using JavaScript to find the weekday of the same date next year

Vue - a guide on customizing a prop in a parent component

Whenever attempting to choose a rating, the MUI dialog continuously refreshes and resets the selected rating

Having trouble retrieving the selected date from the Material-Ui datepicker after the first selection

Guide to designing a CSS gradient with a downward arrow linked to a specific container

Update the array by incorporating a new object that corresponds to a provided list with a unique key-value pair

Instructions for removing the status bar from the configuration file

Using the inline calendar feature of Bootstrap 3 Datepicker to easily select and capture dates

Guide on loading xml information from a web browser using JavaScript

The slider spills over the edges of the page

Transmit analytical data to an external domain without expecting a reply

Guide on implementing asyncWithLDProvider from Launch Darkly in your Next.js application

Establishing the focal point and emphasis within a textarea input field

React hooks causing the for loop to only work on the second iteration

Different kinds of garbage collection operations in NodeJS

Transmit information from the main directive to the subordinate directive

HTML - Centered layout with a constant header and footer

A proven method for distinguishing between desktop and mobile browsers

Is it not possible to use a hyperlink and the general sibling combinator simultaneously?

Accessing a JSON value in SCSS for localization