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

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

数据阵列：{
{squareSize:“squareSize1”，值：“foo”}，
{squareSize:“squareSize3”，值：“bar”}，
{squareSize:“squareSize4”，值：“oof”}，
}

HTML:

CSS:

.squareSize1{高度：100px；}
.squareSize2{高度：200px；}
.squareSize3{高度：300px；}
.squareSize4{高度：400px；}

JAVASCRIPT:

document.ready（函数（）{
// ...  //
// 
//{squareSize:“squareSize4”，值：“foo”}
dataArray.forEach（（数据，索引）=>{
让html=“”
html+=data.value+“”
$dataGrid[0]。innerHTML+=html；
//记录div的高度
//即，如果数据类型为“squareSize4”：400
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'）的结果相同。

：

问题：如果我的dom中还没有任何sqaureSize2元素，那么是否有可能从css中获得这个值200

另外，我需要这个值来做一些高级的UI工作

如果我的dom中还没有任何sqaureSize2元素，那么有可能从css中获得这个值200吗

如果不亲自解析CSS规则，您可以通过在中挖掘对象树来访问该规则

但您可以临时添加该类的元素，获取其

css（“height”）

，然后删除它：

constdiv=$（“”）.addClass（“squareSize2”）.appendTo（document.body）；
常量高度=div.css（“高度”）；
div.remove（）；
控制台。日志（高度）；

.squareSize1{高度：100px；}
.squareSize2{高度：200px；}
.squareSize3{高度：300px；}
.squareSize4{高度：400px；}

如果我的dom中还没有任何sqaureSize2元素，那么有可能从css中获得这个值200吗

如果不亲自解析CSS规则，您可以通过在中挖掘对象树来访问该规则

但您可以临时添加该类的元素，获取其

css（“height”）

，然后删除它：

constdiv=$（“”）.addClass（“squareSize2”）.appendTo（document.body）；
常量高度=div.css（“高度”）；
div.remove（）；
控制台。日志（高度）；

.squareSize1{高度：100px；}
.squareSize2{高度：200px；}
.squareSize3{高度：300px；}
.squareSize4{高度：400px；}

---

我可能错了，但我认为您必须创建元素并将其移出视口，然后以这种方式获取其高度。这可能会有所帮助：首先，您应该测量jQuery

$（“.squareSize1”）

的长度。如果它为零（0）然后你应该第二次创建一个带有该类和一些虚拟内容的虚拟元素。第三次测量虚拟内容的高度。第四次立即删除该虚拟内容。我在研究时不知何故没有发现这个问题，但这就是，谢谢。我可能错了，但我认为你必须创建该元素并将其移出视口这可能会有帮助：首先，您应该测量jQuery

$（“.squareSize1”）

的长度然后你应该第二次用那个类和一些虚拟内容创建一个虚拟元素。第三次测量虚拟内容的高度。第四次立即删除虚拟内容。我在研究时不知何故没有发现这个问题，但就是这个，谢谢。

// 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