javascript - 有没有办法在没有实例的情况下获取 css 类的值？

Question

在我的应用程序中，我正在显示来自数据库的数据。附加到数据的是元数据，用于定义数据的显示方式。为了简单起见，我们假设唯一的元数据是它应该显示的正方形的大小。例如:

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());             
    });
}

稍后在代码中(不是在 document.ready() 中)我有一种方法可以让用户从同类数据中添加内容。问题是，如果同一个 css 类的元素不存在，我就无法获得高度:

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

与 .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

问题:如果我的 dom 中还没有 sqaureSize2 的任何元素，是否可以从我的 css 中获取这个值 200？

附言我需要这个值来做一些高级 UI 的事情

Answer 1

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 ?

需要自己解析 CSS 规则，您可以通过深入研究 document.styleSheets 中的对象树来访问它。 .

但是您可以临时添加一个具有该类的元素，获取其 css("height")，然后将其删除:

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>