如何动态设置@page规则？能否从指定输入框获取值设置页边距？

这个需求完全可以实现，核心是借助CSS变量结合JavaScript来动态同步输入框的值到打印样式里，具体步骤如下：

• 先在CSS中定义一个变量，把@page的margin-top绑定到这个变量：

  @page {
    margin-top: var(--page-margin-top, 1cm); /* 1cm是可选默认值，输入为空时生效 */
  }
  

• 用JS监听输入框P1_MARGIN_TOP的内容变化，实时把输入值赋值给CSS变量：

  const marginInput = document.getElementById('P1_MARGIN_TOP');
  marginInput.addEventListener('input', function() {
    const inputVal = this.value.trim();
    if (inputVal) {
      // 直接将输入值应用到变量，注意输入需是合法CSS长度（如10px、2cm）
      document.documentElement.style.setProperty('--page-margin-top', inputVal);
    } else {
      // 输入为空时重置回默认值
      document.documentElement.style.removeProperty('--page-margin-top');
    }
  });
  

• 可选优化：如果用户可能只输入数字（不带单位），可以在JS里自动补充单位（比如默认px）：

  const inputVal = this.value.trim();
  if (!isNaN(inputVal)) {
    document.documentElement.style.setProperty('--page-margin-top', `${inputVal}px`);
  } else if (inputVal) {
    document.documentElement.style.setProperty('--page-margin-top', inputVal);
  }
  

注意事项 #

输入的值必须是合法的CSS长度单位（px、cm、mm、in等），否则样式不会生效；现代浏览器（Chrome、Firefox、Edge）都支持这种方案，旧版IE可能存在兼容性问题。

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