如何在CSS中基于元素值动态为变量分配属性值？

核心需求实现 #

要让.div2的padding-left和.div1的margin-left动态保持一致，CSS本身无法自动读取另一个元素的属性值，最优方案是用CSS变量统一管理间距值，避免重复写死数值，自然实现同步：

/* 根节点定义统一变量 */
:root {
  --gap-percent: 1.8%;
}

.div1 {
  margin-left: var(--gap-percent);
}

.div2 {
  padding-left: var(--gap-percent);
}

如果受原有代码限制无法提前定义变量，可通过JavaScript动态获取目标元素的计算后样式，再赋值给需要同步的元素：

// 获取.div1的margin-left计算值
const div1Margin = getComputedStyle(document.querySelector('.div1')).marginLeft;
// 赋值给.div2的padding-left
document.querySelector('.div2').style.paddingLeft = div1Margin;

// 适配响应式场景，窗口 resize 时重新计算
window.addEventListener('resize', () => {
  const div1Margin = getComputedStyle(document.querySelector('.div1')).marginLeft;
  document.querySelector('.div2').style.paddingLeft = div1Margin;
});

WooCommerce实际场景解决方案 #

针对Envo Shop Pro主题中商品按钮与快速查看按钮的间距同步需求，用CSS变量统一管理是最简洁的方案：

/* 定义商品侧边内边距的变量 */
:root {
  --product-side-padding: 1.8%;
}

/* 复用变量设置商品容器的内边距 */
li.product {
  padding: 1.2% var(--product-side-padding);
}

/* 快速查看按钮使用同一个变量设置右边距 */
.envo_shop_pro_preview {
  visibility: visible;
  position: absolute;
  width: 20%; /* 注：原代码中的length为无效属性，应改为width */
  right: 0;
  margin-right: var(--product-side-padding);
}

li.product .button {
  width: 80%; /* 同样修正length为width */
}

若无法修改主题自带CSS，可通过JS动态获取商品容器的内边距并赋值：

// 获取商品容器的padding-right计算值
const productPadding = getComputedStyle(document.querySelector('li.product')).paddingRight;
// 给所有快速查看按钮设置margin-right
document.querySelectorAll('.envo_shop_pro_preview').forEach(btn => {
  btn.style.marginRight = productPadding;
});

// 响应式适配
window.addEventListener('resize', () => {
  const productPadding = getComputedStyle(document.querySelector('li.product')).paddingRight;
  document.querySelectorAll('.envo_shop_pro_preview').forEach(btn => {
    btn.style.marginRight = productPadding;
  });
});

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