我可以在执行此 JavaScript 代码时设置 DOM 样式吗？

Question

我正在尝试从网页打印特定的列元素，而不打印网页上显示的任何其他内容。 列元素位于网页居中，占据网页宽度的 50%。 我已经能够使用以下 JavaScript 代码来做到这一点：

function printPageArea(areaID){
    var printContent = document.getElementById(areaID).innerHTML;
    var originalContent = document.body.innerHTML;
    document.body.innerHTML = printContent;
    window.print();
    document.body.innerHTML = originalContent;
}

我遇到的问题是列内容（以 HTML 形式包含在

printContent

变量中）正在以纸张宽度的 100% 打印。 这使得文本非常小。 将打印页面的方向从纵向更改为横向会有所帮助，但不是我想要的。

我想要做的就是在上面的 JavaScript 代码中添加一些代码，以便我可以在捕获

printContent

内容之前设置其边距和字体大小的样式。 我尝试过使用

document.getElementById(areaID).style = ...

来做到这一点，但它只会在打印窗口关闭后更改

(areadID)

元素的样式。

是否有可能做我想做的事？ 如果是的话，怎么办？

Answer 1

正如 @yogi 所建议的，首选解决方案是使用印刷媒体查询。但如果这不适合您，那么您可以按照以下步骤操作：

• 暂时将

  style

  插入您的文档中。
• 为内容创建一个临时容器。
• 将

  body

  内容替换为打印内容。
• 打印后，恢复原来的内容。

这是一个演示：

function printPageArea(areaID) {
    const printContent = document.getElementById(areaID).innerHTML;
    const originalContent = document.body.innerHTML;

    // Create a temporary style element
    const style = document.createElement('style');
    style.innerHTML = `
        #printArea {
            width: 50%;
            margin: 0 auto;
            font-size: 32px;
        }
    `;
    document.head.appendChild(style);

    // Create a temporary container for the print content
    const printContainer = document.createElement('div');
    printContainer.id = 'printArea';
    printContainer.innerHTML = printContent;
    document.body.innerHTML = '';
    document.body.appendChild(printContainer);

    window.print();

    // Restore the original content
    document.body.innerHTML = originalContent;
    document.head.removeChild(style);
}

body {
  font-family: Arial, sans-serif;
}

.content {
  width: 50%;
  margin: 5px auto;
  text-align: center;
  border: 1px solid #000;
  padding: 20px;
}

<button onclick="printPageArea('printableArea')">Print</button>
<div class="content" id="printableArea">
  This is the content that will be printed. It is centered and takes up 50% of the width of the page. Lorem ipsum odor amet, consectetuer adipiscing elit. Non facilisis et nostra dignissim imperdiet himenaeos! Cras lobortis neque scelerisque per hendrerit,
  amet sagittis felis parturient.
</div>
<div class="content">
  Some content that will not be printed. Lorem ipsum odor amet, consectetuer adipiscing elit. Non facilisis et nostra dignissim imperdiet himenaeos! Cras lobortis neque scelerisque per hendrerit, amet sagittis felis parturient.
</div>