CSS - 获取其他元素的属性

Question

CSS - 获取其他元素的属性

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

#div1 {
    height:400px;
}

#div2 {
    height:#div1.height;
}

Run Code Online (Sandbox Code Playgroud)

正如您所看到的,我在Javascript中完成了与document.getElementById("id").style.height完全相同的操作.
是否有可能做到这一点？如果没有,我想知道是否存在论坛,网站等,以讨论CSS改进或了解这种语言的发展.
提前致谢!

Answer 1

Yur*_*tos 8

这种方法是使用CSS变量

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

Run Code Online (Sandbox Code Playgroud)

styles.css的

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 2

bob*_*ato 3

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

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

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

理解JS和CSS如何交互比较复杂；哪个代码首先运行，JS 属性反映计算值还是表达式本身等。
它重复了在创建 JavaScript 时已经完成的工作
CSS 的实现变得更加复杂，而且速度可能会更慢，而且 bug 也更多
由于 CSS 并不是作为一种编程语言而设计的，因此在什么情况下理解和控制会更困难（如果可能的话）代码运行在实践中，这可能意味着重新计算表达式的次数比实际需要的次数要多

CSS 成为安全问题的新载体，尤其是当表达语言是图灵完备或接近图灵完备的时候

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

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

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

预计到达时间

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

归档时间：	8 年，8 月前
查看次数：	3370 次
最近记录：	7 年，3 月前