引用类中的特定值？答案

【问题标题】：reference specific value inside of a class?引用类中的特定值？
【发布时间】：2022-08-17 15:05:17
【问题描述】：

我试图参考一类的一部分，以便在代码的另一部分计算某些东西。我只想参考尺寸，没有其他的.下面，你会看到眼镜蛇的尺寸信息为空白。我正在选择任意数字和计算 - 只是试图让它稍微“复杂”，足以解释更多。我希望这是有道理的：

我想要眼镜蛇的宽度相等viper 的宽度除以 2.
我想要眼镜蛇的高度相等毒蛇的身高正好.
我希望能够只更改毒蛇的信息并拥有
cobra 自动更新，因为它引用了 viper.

.viper
 {
    width: calc((100px - 50px) * 3) / 2);
    height: 200px;
    font-family: garamond;
    font-color: black;

 }

.cobra
  {
    width:
    height:
    font-family: georgia;
    font-color: blue;
  }

您是否尝试使用 CSS 或 JS 来完成此任务？
@loomy 我真的不确定。我对这一切都很陌生。它用于 tumblr 页面，所以我在 replit.com 上对其进行编辑，然后在一个页面上编辑整个代码，所有代码都会自动更新。不过，我 90% 肯定它是 CSS。这将在 html 代码的 <style> 部分
您可能只使用 CSS 和变量就可以做到这一点，但请将基本的 HTML 结构放入您的问题中，以便我们可以看到这两个蛇元素是如何相关的。他们是父母中的兄弟姐妹吗？
@AHaworth 他们是两个不相关的独立元素。我正在尝试仅将 viper 的信息提取到 cobra 中使用，而不必将 viper 的整个计算信息放入 cobra

标签： javascript html css reference calculation

【解决方案1】：

如果您尝试使用 JUST CSS 来完成此操作，则可以使用 CSS variables 轻松完成。

首先声明你的毒蛇的width 和height 作为蛇的基础：

 :root{
  --viper-width: calc((100px - 50px) * 3) / 2);
  --viper-height: 200px;
 }

然后你把这个变量赋予你想要修改的蛇的等价属性。

.cobra{
  width: calc(var(--viper-width) / 2);
  height: var(--viper-height);
  font-family: georgia;
  color: blue;
}

然后，每当您更改 --viper-width 和 --viper-height 变量时，您的 .cobra 都会相应调整。

【讨论】：

这正是我正在寻找的！太感谢了：）

【解决方案2】：

您可以使用 CSS 变量，但请注意您的代码中有几个错误。

字体颜色不存在，使用颜色。

calc 缺少左括号。

这个 sn-p 更正了这些并将 viper 的高度和宽度放入根中，以便这些 CSS 变量可以在文档中的任何位置使用（假设 cobra 和 viper 不相关）。

:root {
  --viperW: calc(((100px - 50px) * 3) / 2);
  --viperH: 200px;
}

.viper {
  width: var(--viperW);
  height: var(--viperH);
  font-family: garamond;
  color: black;
  background-color: pink;
}

.cobra {
  width: calc(var(--viperW) / 2);
  height: var(--viperH);
  font-family: georgia;
  color: blue;
  background-color: cyan;
}

<div class="viper">Viper</div>
<div class="cobra">Cobra</div>

【讨论】：