javascript – CSS – 获取其他元素的属性

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

#div1 {
    height:400px;
}

#div2 {
    height:#div1.height;
}

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

最佳答案

Internet Explorer曾经用于支持“CSS表达式”,它可以像您描述的那样工作(工作？).这从未被开发人员,其他浏览器或标准机构广泛采用.

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

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

>理解JS和CSS如何交互更复杂;哪个代码首先运行,JS属性是否反映计算值或表达式本身等.
>它复制了在创建JavaScript时已经完成的工作
> CSS实现起来变得更加复杂,而且可能更慢,更笨拙
>由于CSS不是作为编程语言设计的,因此在代码运行时理解和控制会更困难(如果可能的话);在实践中,这可能意味着重新计算表达式的次数超出了他们的需要
> CSS成为安全问题的新载体,特别是如果表达式语言是Turing-complete或接近它

据说IE的实现因为这些原因而表现糟糕(像大多数人一样,我从来没有认真使用过它).它本质上只是一种在CSS文件中嵌入JS的方法,因此它不适用于禁用的脚本.

你可能会争辩说,像你的例子那样的“简单”表达式仍然存在,并且这不需要图灵完整的语法.但是,无论你定义“简单”,总会有一个点,你想要的表达式不够“简单”,你必须将所有东西都迁移到JS.逻辑选择是让CSS只处理常量值(使其尽可能简单地实现),并使用JS进行任何动态计算.

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

ETA

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

javascript – CSS – 获取其他元素的属性

相关文章