如何通过自定义方式实时更新CSS默认样式并调整边距比例？

嘿，我来帮你搞定这个把现有元素的padding和margin按比例缩放的需求！下面分两种方案来给你详细说明：

一、CSS方案（需重构原样式或使用CSS变量） #

首先得明确：纯CSS没办法直接获取元素已经设置好的padding/margin数值来做比例计算——你之前尝试的calc(50%)是无效的，因为calc()需要明确的数值参考，它没法读取元素原有的样式值。不过我们可以通过CSS变量来绕开这个限制：

步骤1：修改原style.css，用CSS变量定义padding/margin #

把原来硬编码的px值换成变量，这样后续就能在custom.css里复用计算：

/* style.css */
.text1 { 
  --padding-base: 20px;
  padding: var(--padding-base); 
}
.text2 { 
  --padding-base: 30px;
  padding: var(--padding-base); 
}

步骤2：在custom.css里按比例覆盖 #

现在就可以用calc()结合变量来设置比例值了，比如要改成50%、75%：

/* custom.css */
/* 统一设置所有目标元素为50%比例 */
.text1, .text2 {
  padding: calc(var(--padding-base) * 0.5);
}

/* 或者给不同比例单独做类，灵活切换 */
.scale-50 {
  padding: calc(var(--padding-base) * 0.5);
}
.scale-75 {
  padding: calc(var(--padding-base) * 0.75);
}

使用的时候只要给元素加对应的类就行：

<span class="text1 scale-50">texto</span> <!-- 10px padding -->
<span class="text2 scale-75">texto</span> <!-- 22.5px padding -->

二、JavaScript方案（无需修改原CSS） #

如果没法改动原style.css，JavaScript就是更直接的选择——它可以读取元素的计算样式，再按比例调整数值。下面是完整的实现代码：

基础版代码（固定比例） #

// 定义缩放比例：0.5=50%，0.75=75%，1.5=150%等
const scaleRatio = 0.5;

// 选择所有需要调整的元素，可根据实际需求修改选择器
const targetElements = document.querySelectorAll('.text1, .text2');

targetElements.forEach(el => {
  // 获取元素的计算样式（即浏览器最终渲染的样式）
  const computedStyle = window.getComputedStyle(el);

  // 处理padding的四个方向
  const newPaddingTop = parseFloat(computedStyle.paddingTop) * scaleRatio;
  const newPaddingRight = parseFloat(computedStyle.paddingRight) * scaleRatio;
  const newPaddingBottom = parseFloat(computedStyle.paddingBottom) * scaleRatio;
  const newPaddingLeft = parseFloat(computedStyle.paddingLeft) * scaleRatio;
  el.style.padding = `${newPaddingTop}px ${newPaddingRight}px ${newPaddingBottom}px ${newPaddingLeft}px`;

  // 同理处理margin的四个方向
  const newMarginTop = parseFloat(computedStyle.marginTop) * scaleRatio;
  const newMarginRight = parseFloat(computedStyle.marginRight) * scaleRatio;
  const newMarginBottom = parseFloat(computedStyle.marginBottom) * scaleRatio;
  const newMarginLeft = parseFloat(computedStyle.marginLeft) * scaleRatio;
  el.style.margin = `${newMarginTop}px ${newMarginRight}px ${newMarginBottom}px ${newMarginLeft}px`;
});

进阶版：封装成可复用函数 #

如果需要频繁切换比例，可以把逻辑封装成函数：

function scaleSpacing(selector, ratio) {
  const elements = document.querySelectorAll(selector);
  elements.forEach(el => {
    const computedStyle = window.getComputedStyle(el);
    
    // 处理padding
    const paddingValues = ['Top', 'Right', 'Bottom', 'Left'].map(side => {
      return parseFloat(computedStyle[`padding${side}`]) * ratio;
    });
    el.style.padding = paddingValues.map(v => `${v}px`).join(' ');
    
    // 处理margin
    const marginValues = ['Top', 'Right', 'Bottom', 'Left'].map(side => {
      return parseFloat(computedStyle[`margin${side}`]) * ratio;
    });
    el.style.margin = marginValues.map(v => `${v}px`).join(' ');
  });
}

// 使用示例：把所有.text类元素的间距改成75%
scaleSpacing('.text1, .text2', 0.75);

注意事项 #

• 这个方法会读取元素最终渲染的样式值（不管原样式是px、em还是rem），计算后会以px单位重新设置；
• 最好把代码放在DOMContentLoaded事件里，确保元素加载完成后再执行：

  document.addEventListener('DOMContentLoaded', () => {
    scaleSpacing('.text1, .text2', 0.5);
  });
  

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