I have an application that pulls data from a database and displays it with associated metadata that dictates the display style. Let's simplify it and say the only metadata is the size of the square it should appear 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.
Issue is, if an element of the same CSS class doesn't already exist, I can't get the height:
// I have elements of class 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 class squareSize1 and squareSize3:
console.log($(".squareSize1").css('height')); // 100px
console.log($(".squareSize2").css('height')); // undefined
console.log($(".squareSize3").css('height')); // 300px
QUESTION: Can I retrieve the value of 200 from my CSS if I don't have any elements of squareSize2 in my DOM yet?
P.S. I need this value for some advanced UI functionality