能否在JavaScript执行时设置DOM样式以调整打印内容布局？

当然可以实现需求，问题出在你当前的代码直接替换了body的innerHTML，导致样式设置时机不对，还容易破坏原有页面状态。下面给你两种靠谱的实现方式：

方法一：修改JS逻辑，创建临时打印容器 #

这种方式通过隐藏原始内容、创建带样式的临时容器，确保打印样式提前生效，同时不影响原有页面：

function printPageArea(areaID) {
    const target = document.getElementById(areaID);
    const originalChildren = [...document.body.children];
    
    // 隐藏页面所有原有内容
    originalChildren.forEach(el => el.style.display = 'none');
    
    // 创建专属打印容器并设置样式
    const printWrap = document.createElement('div');
    printWrap.innerHTML = target.innerHTML;
    printWrap.style.width = '50%';
    printWrap.style.margin = '0 auto';
    printWrap.style.fontSize = '18px'; // 可根据需求调整字号
    printWrap.style.padding = '2rem'; // 增加内边距提升可读性
    document.body.appendChild(printWrap);
    
    // 触发打印
    window.print();
    
    // 恢复页面原始状态
    document.body.removeChild(printWrap);
    originalChildren.forEach(el => el.style.display = '');
}

方法二：使用CSS媒体查询（更简洁） #

这种方式无需大幅修改JS，直接通过@media print为打印场景单独设置样式，符合前端最佳实践：

首先在页面CSS中添加打印专属样式：

@media print {
    /* 隐藏页面所有非目标内容 */
    body > *:not(#your-area-id) {
        display: none !important;
    }
    
    /* 给目标打印区域设置样式 */
    #your-area-id {
        width: 50% !important;
        margin: 0 auto !important;
        font-size: 18px !important;
        padding: 2rem !important;
    }
    
    /* 确保目标区域内的元素正常显示 */
    #your-area-id > * {
        display: initial !important;
    }
}

然后简化JS代码，直接触发打印：

function printPageArea(areaID) {
    window.print();
}

原方法失效原因 #

你之前尝试的document.getElementById(areaID).style = ...只在打印后生效，是因为替换body.innerHTML后，原元素已被移除，你修改的是页面旧元素的样式，而打印用的是新插入的innerHTML内容，两者不是同一个节点。上面两种方法都规避了这个问题，确保样式作用在打印内容上。

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