CSS - 获取其他元素的 属性
CSS - Get property of other element
我想知道是否可以在不使用 Javascript 或其他编程语言的情况下使用 Javascript DOM 来引用某些元素。
这就是我的意思。假设我们有两个 div 应该具有相同的高度。我想获得第一个 div 的高度以将其分配给第二个，如下所示：
#div1 {
height:400px;
}
#div2 {
height:#div1.height;
}
如您所见，我正在做与 document.getElementById("id").style.height 在 Javascript.
中完全相同的事情
是否有可能做到这一点？如果没有，我想知道是否存在论坛、网站等来讨论 CSS 改进或了解这种语言的发展。
提前致谢！
这是不可能的。你必须使用 JS 和 DOM.
使用CSS Flexbox....
查看this tutorial
和 this demo.
.container {
align-items: stretch;
}
这个方法是使用 CSS Variable
/*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.
访问这个变量
Internet Explorer 过去支持“CSS 表达式”，就像您描述的那样（有效？）。这从未被开发人员、其他浏览器或标准机构广泛采用。
为什么这不是一个好的设计的一般原则称为“关注点分离”，这是 W3C 特别一直大力提倡的。这个想法是定义抽象内容的语言（HTML）完全独立于定义视觉外观的语言（CSS）和定义动态行为的语言（JavaScript）。
虽然通常感觉将“快速”计算直接放在 CSS 中比创建单独的脚本更有意义，但实际上这会导致很多问题，例如：
- 理解 JS 和 CSS 如何交互更复杂；哪个代码运行先，JS属性是反映计算值还是表达式本身等
- 它重复了在创建 JavaScript
时已经完成的工作
- CSS 实施起来变得更加复杂，而且可能更慢且错误更多
- 由于 CSS 不是作为一种编程语言设计的，因此当 代码 运行 时，理解和控制 将更加困难（如果可能的话） ;在实践中，这可能意味着表达式被重新计算的次数超过了它们需要的次数
- CSS成为安全问题的新载体，尤其是当表达语言是图灵完备或接近图灵完备的时候
据说由于这些原因，IE 的实现性能很差（像大多数人一样，我从未认真使用过它）。它本质上只是一种将 JS 嵌入 CSS 文件的方法，因此它不适用于禁用脚本。
您可能会争辩说，仍然存在像您的示例那样的“简单”表达式的情况，并且这不需要图灵完备的语法。但是无论你如何定义“简单”，总会有一个点，你想要的表达方式不够“简单”，无论如何你都必须将所有东西都迁移到 JS。合乎逻辑的选择是让 CSS 只处理常量值（使其尽可能简单地实现），并使用 JS 进行 any 动态计算。
所以简短的回答是：W3C 和个别浏览器供应商考虑了 CSS 这个方向，并得出结论认为它弊大于利。
预计到达时间
重新阅读问题，不清楚您是在谈论一般表达式（如 width:element1.width*2），还是只是简单的符号值。 CSS-Variable 允许您使用宏类型变量，这使得样式表更易于编辑。但是，它不允许您将一个元素的高度设置为另一个元素的实际渲染 高度；这将涉及一个潜在的复杂的 运行 时间计算，并且由于上述原因，最好通过 JS 完成，您可以控制何时进行计算，如何考虑 CSS 转换，等等。
我想知道是否可以在不使用 Javascript 或其他编程语言的情况下使用 Javascript DOM 来引用某些元素。
这就是我的意思。假设我们有两个 div 应该具有相同的高度。我想获得第一个 div 的高度以将其分配给第二个，如下所示：
#div1 {
height:400px;
}
#div2 {
height:#div1.height;
}
如您所见，我正在做与 document.getElementById("id").style.height 在 Javascript.
中完全相同的事情
是否有可能做到这一点？如果没有，我想知道是否存在论坛、网站等来讨论 CSS 改进或了解这种语言的发展。
提前致谢！
这是不可能的。你必须使用 JS 和 DOM.
使用CSS Flexbox....
查看this tutorial 和 this demo.
.container {
align-items: stretch;
}
这个方法是使用 CSS Variable
/*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.
访问这个变量Internet Explorer 过去支持“CSS 表达式”，就像您描述的那样（有效？）。这从未被开发人员、其他浏览器或标准机构广泛采用。
为什么这不是一个好的设计的一般原则称为“关注点分离”，这是 W3C 特别一直大力提倡的。这个想法是定义抽象内容的语言（HTML）完全独立于定义视觉外观的语言（CSS）和定义动态行为的语言（JavaScript）。
虽然通常感觉将“快速”计算直接放在 CSS 中比创建单独的脚本更有意义，但实际上这会导致很多问题，例如：
- 理解 JS 和 CSS 如何交互更复杂；哪个代码运行先，JS属性是反映计算值还是表达式本身等
- 它重复了在创建 JavaScript 时已经完成的工作
- CSS 实施起来变得更加复杂，而且可能更慢且错误更多
- 由于 CSS 不是作为一种编程语言设计的，因此当 代码 运行 时，理解和控制 将更加困难（如果可能的话） ;在实践中，这可能意味着表达式被重新计算的次数超过了它们需要的次数
- CSS成为安全问题的新载体，尤其是当表达语言是图灵完备或接近图灵完备的时候
据说由于这些原因，IE 的实现性能很差（像大多数人一样，我从未认真使用过它）。它本质上只是一种将 JS 嵌入 CSS 文件的方法，因此它不适用于禁用脚本。
您可能会争辩说，仍然存在像您的示例那样的“简单”表达式的情况，并且这不需要图灵完备的语法。但是无论你如何定义“简单”，总会有一个点，你想要的表达方式不够“简单”，无论如何你都必须将所有东西都迁移到 JS。合乎逻辑的选择是让 CSS 只处理常量值（使其尽可能简单地实现），并使用 JS 进行 any 动态计算。
所以简短的回答是：W3C 和个别浏览器供应商考虑了 CSS 这个方向，并得出结论认为它弊大于利。
预计到达时间
重新阅读问题，不清楚您是在谈论一般表达式（如 width:element1.width*2），还是只是简单的符号值。 CSS-Variable 允许您使用宏类型变量，这使得样式表更易于编辑。但是，它不允许您将一个元素的高度设置为另一个元素的实际渲染 高度；这将涉及一个潜在的复杂的 运行 时间计算，并且由于上述原因，最好通过 JS 完成，您可以控制何时进行计算，如何考虑 CSS 转换，等等。