无关联类样式复用：如何让类a获取类b的全部样式？

要实现仅保留目标元素的a类，但复用b类的全部样式，且不修改样式表、无需逐个编写样式属性，可以通过以下JS方法实现：

• 创建一个隐藏的临时元素，为其添加b类，以此获取该类的最终计算样式
• 将临时元素的计算样式批量应用到目标元素上

代码示例 #

// 定位到目标元素（第二个class为'a'的div）
const targetElement = document.querySelectorAll('.a')[1];

// 创建临时元素用于提取'b'类的计算样式
const tempElement = document.createElement('div');
tempElement.classList.add('b');
tempElement.style.display = 'none'; // 隐藏避免影响页面布局
document.body.appendChild(tempElement);

// 获取'b'类元素的最终计算样式
const bClassComputedStyle = window.getComputedStyle(tempElement);

// 遍历所有样式属性，批量应用到目标元素
for (const prop of bClassComputedStyle) {
  targetElement.style.setProperty(prop, bClassComputedStyle.getPropertyValue(prop));
}

// 清理临时元素
document.body.removeChild(tempElement);

原理说明 #

1. 临时元素的作用是模拟b类元素的样式环境，通过window.getComputedStyle()能准确获取该类所有生效的样式（包括继承、优先级叠加后的最终样式）
2. 遍历计算样式的所有属性并设置到目标元素，会覆盖a类原有的样式，实现无关联类的样式复用
3. 整个过程无需修改原有样式表，也不用手动列举大量样式属性

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