Is there a way to get the value of a css class with no instances?

Question

In my app, I'm displaying data coming from a database. Attached to the data are metadata that define how it should be displayed. To keep it simple, let's assume the only metadata is the size of the square it should be displayed in. For example :

dataArray : {
    {squareSize: "squareSize1", value:"foo"},
    {squareSize: "squareSize3", value:"bar"},
    {squareSize: "squareSize4", value:"oof"},
}

HTML :

<div id="dataGrid" class="grid">
</div>

CSS:

.squareSize1 { height: 100px; }
.squareSize2 { height: 200px; }
.squareSize3 { height: 300px; }
.squareSize4 { height: 400px; }

JAVASCRIPT :

document.ready(function() {

    // ...  //
    // 
    // {squareSize : "squareSize4", value: "foo"}
    dataArray.forEach((data, index) => {
        let html =  "<div id=" + index 
        html += " class=\"" + data.squareSize + "\" >" 
        html += data.value + "</div>"
        $dataGrid[0].innerHTML += html; 

        // logs the height of the div 
        // i.e. if data was of type "squareSize4" : 400
        console.log($("." + data.squareSize).height());             
    });
}

Later in the code (not in the document.ready() I have a way for users to add content from the same kind of data. Problem is, if an element of the same css class doesn't already exist, I can't get the height :

// I have elements of classe squareSize1 and squareSize3 :
console.log($(".squareSize1").height());  // 100
console.log($(".squareSize2").height());  // undefined
console.log($(".squareSize3").height());  // 300

Same results with .css('height') :

// I have elements of classe squareSize1 and squareSize3 :
console.log($(".squareSize1").css('height'));  // 100px
console.log($(".squareSize2").css('height'));  // undefined
console.log($(".squareSize3").css('height'));  // 300px

QUESTION : Is it possible to get this value of 200 form my css if I don't have any element of sqaureSize2 in my dom yet ?

P.s. I need this value to do some advanced UI stuff

I could be wrong, but I think you would have to create the element and move it out of the viewport and get it's height that way. — WizardCoder, Jul 15 '19 at 14:19
This might help: https://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript — Vitaliy Isikov, Jul 15 '19 at 14:20
__1st__ You should measure the length of the jQuery `$(".squareSize1")`. If it is zero (0) then you should __2nd__ Create a dummy element with that class and some dummy content. __3rd__ measure the height of that dummy content. __4th__ Immediately remove that dummy content. — yunzen, Jul 15 '19 at 14:26
I somehow didn't find this question while researching, but this is it, thanks. — ThePainfull, Jul 15 '19 at 14:27

score 4 · Accepted Answer · answered Jul 15 '19 at 14:20

Is it possible to get this value of 200 form my css if I don't have any element of sqaureSize2 in my dom yet ?

Not without parsing the CSS rule yourself, which you can access by digging into object tree in document.styleSheets.

But you can temporarily add an element with that class, get its css("height"), and then remove it:

const div = $("<div>").addClass("squareSize2").appendTo(document.body);
const height = div.css("height");
div.remove();
console.log(height);

.squareSize1 { height: 100px; }
.squareSize2 { height: 200px; }
.squareSize3 { height: 300px; }
.squareSize4 { height: 400px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Is there a way to get the value of a css class with no instances?

1 Answers1