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的值？

P.s。我需要这个值来做一些高级的UI事情

Answer 1

如果我的dom中还没有任何sqaureSize2元素，是否有可能从CSS中获得此值200？

并非没有自己解析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>

有没有一种方法可以获取没有实例的CSS类的值？

1 个答案: