ETA

Question

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

#div1 {
    height:400px;
}

#div2 {
    height:#div1.height;
}

正如您所看到的，我在Javascript中完成了与document.getElementById（＆＃34; id＆＃34;）。style.height完全相同的内容。
是否有可能做到这一点？如果没有，我想知道是否存在论坛，网站等，以讨论CSS改进或了解这种语言的发展。
提前谢谢！

Answer 1

此方法是使用CSS Variable

<强>的index.html

<!DOCTYPE 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>

<强> styles.css的

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

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

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

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

Answer 2

Internet Explorer用于支持＆＃34; CSS表达式＆＃34;就像你描述的那样有效（工作？）这从未被开发人员，其他浏览器或标准组织广泛采用。

为什么这不是一个好的设计的一般原则被称为＆＃34;关注点分离＆＃34;，这是W3C特别强烈推动的。我们的想法是，用于定义抽象内容（HTML）的语言完全独立于定义视觉外观（CSS）和动态行为语言（JavaScript）的语言。

虽然经常感觉放入＆＃34;快速＆＃34;直接在CSS中进行计算，而不是创建单独的脚本，实际上这会导致很多问题，例如：

理解JS和CSS如何交互更复杂;哪个代码首先运行，JS属性是否反映计算值或表达式本身等。
它复制了在创建JavaScript时已经完成的工作
CSS实现起来变得更加复杂，而且可能更慢和更慢
由于CSS并非设计为编程语言，因此在代码运行时理解和控制会更难（如果可能的话）;在实践中，这可能意味着重新计算表达的次数比他们需要的更多

CSS成为安全问题的新载体，特别是如果表达式语言是Turing-complete或接近它

由于这些原因，IE的实施据称表现糟糕（像大多数人一样，我从未认真使用它）。它本质上只是一种在CSS文件中嵌入JS的方法，因此它不能用于禁用脚本。

你可能会争辩说＆＃34;简单＆＃34;表达式就像你的例子一样，并且这并不需要Turing完整的语法。但是，无论你如何定义＆＃34;简单＆＃34;，总会有一个点，你想要的表达不是简单的＆＃34;够了，无论如何你必须将所有东西都迁移到JS。逻辑选择是让CSS只处理常量值（使其尽可能简单地实现），并使用JS进行任何动态计算。

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

ETA

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

Answer 3

使用CSS Flexbox ....

结帐this tutorial 和this demo。

.container {
  align-items: stretch;
}

Answer 4

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

CSS - 获取其他元素的属性

4 个答案:

ETA