9

我想知道是否可以使用 Javascript DOM 之类的东西来引用某些元素，而无需使用 Javascript 或其他编程语言。
这就是我的意思。假设我们有两个应该具有相同高度的 div。我想获取第一个 div 的高度以将其分配给第二个，如下所示：

#div1 {
    height:400px;
}

#div2 {
    height:#div1.height;
}

如您所见，我在 Javascript 中执行的 document.getElementById("id").style.height 完全相同。
是否有可能做到这一点？如果没有，我想知道是否存在论坛、网站等来讨论 CSS 改进或了解这种语言的发展。
提前致谢！

4

4 回答 4

10

这样做的方法是使用CSS 变量

/*css*/

body {
  --div-height: 400px;
}

#div1 {
  height: var(--div-height);
}

#div2 {
  height: var(--div-height);
}
<!DOCTYPE html>
<!---html--->
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div id="div1">
    <p>This is div1</p>
  </div>
  <div id="div2">
    <p>This is div2</p>
  </div>
</body>

</html>

在这个例子中，我在 body 范围内声明了变量 --div-height，所以 body 标签内的任何元素都可以通过 css 访问这个变量。

于 2017-03-21T20:40:25.860 回答
3

Internet Explorer 曾经支持像您描述的那样有效（有效？）的“CSS 表达式”。这从未被开发人员、其他浏览器或标准机构广泛采用。

为什么这不是一个好的设计的一般原则称为“关注点分离”，特别是 W3C 一直大力提倡的东西。这个想法是定义抽象内容的语言 (HTML) 完全独立于定义视觉外观的语言 (CSS) 和动态行为的语言 (JavaScript)。

尽管通常感觉将“快速”计算直接放入 CSS 中而不是创建单独的脚本是有意义的，但实际上这会导致很多问题，例如：

  • 理解 JS 和 CSS 如何交互更复杂；哪个代码先运行，JS属性是反映计算值还是表达式本身等。
  • 它重复了在创建 JavaScript 时已经完成的工作
  • CSS 的实现变得更加复杂，而且速度可能更慢且错误更多
  • 由于 CSS 不是作为编程语言设计的，因此（如果可能的话）代码运行时更难理解和控制；在实践中，这可能意味着重新计算表达式的频率超过了它们需要的频率
  • CSS 成为安全问题的新载体，特别是当表达语言是图灵完备或接近它时

由于这些原因，IE 的实现据说性能很差（像大多数人一样，我从未认真使用过它）。它本质上只是一种将 JS 嵌入 CSS 文件的方法，因此它不适用于禁用脚本。

您可能会争辩说，仍然存在像您的示例这样的“简单”表达式的情况，并且这不需要图灵完备的语法。但是，无论您如何定义“简单”，总会出现您想要的表达式不够“简单”的情况，并且无论如何您都必须将所有内容迁移到 JS。合乎逻辑的选择是让 CSS 只处理常量值（使其实现尽可能简单），并使用 JS 进行任何动态计算。

所以简短的回答是：W3C 和个别浏览器供应商考虑了 CSS 的这个方向，并得出结论认为它弊大于利。

预计到达时间

重新阅读这个问题，不清楚您是在谈论一般表达式（如width:element1.width*2），还是只是简单的符号值。CSS-Variable 确实允许您使用宏类型变量，这使得样式表更易于编辑。但是，它不允许您将一个元素的高度设置为另一个元素的实际渲染高度。这将涉及潜在的复杂运行时计算，由于上述原因，最好通过 JS 来完成，您可以控制何时进行计算、如何考虑 CSS 转换等。

于 2017-03-21T20:46:50.443 回答
2

使用 CSS Flexbox ....

查看本教程 和本演示。

.container {
  align-items: stretch;
}
于 2017-03-21T20:25:19.557 回答
0

这是不可能的。您必须使用 JS 和 DOM。

于 2017-03-21T20:21:01.290 回答