CSS中能否从一个元素获取属性值并赋值给另一个元素？

结论 #

原生CSS目前没有直接支持跨任意DOM元素读取属性值并赋值的语法，你示例中/* get value from #origin */的逻辑没有对应的原生CSS写法，不过有以下几种常用的替代方案可以实现相同的效果：

方案1：使用CSS自定义属性（变量，推荐） #

这是纯CSS实现的最优方案，你只需要把公共的属性值定义为变量，两个元素同时引用即可，后续修改变量值两个元素的样式会同步更新：

/* 可以在公共父级或者:root全局作用域定义变量 */
:root {
  --shared-bg-color: #58ae12;
}
#origin {
  background-color: var(--shared-bg-color);
}
#reciever {
  background-color: var(--shared-bg-color);
}

如果两个元素存在父子层级关系，也可以直接把变量定义在源元素上，子元素直接引用：

#origin {
  --origin-bg: #58ae12;
  background-color: var(--origin-bg);
}
/* #reciever 是#origin的子元素时可以直接用父级定义的变量 */
#origin #reciever {
  background-color: var(--origin-bg);
}

方案2：使用JavaScript实现（适用于动态获取任意元素属性的场景） #

如果两个元素没有固定层级关系、且源元素的样式可能动态变化，你可以用JS读取源元素的计算样式，赋值给目标元素：

const originEl = document.querySelector('#origin');
const receiverEl = document.querySelector('#reciever');

// 读取源元素的最终计算样式
const originBg = getComputedStyle(originEl).backgroundColor;
// 赋值给目标元素
receiverEl.style.backgroundColor = originBg;

如果需要监听源元素的样式变化同步更新，可以搭配MutationObserver实现监听逻辑。

内容的提问来源于stack exchange，提问作者octa_yt00