Can I Style The DOM As This JavaScript Code Executes?

Question

I am trying to print a specific column element from a web page and not print anything else that is displayed on the web page. The column element is centered on the web page and takes up 50% of the width of the web page. I have been able to do this using the following JavaScript code:

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

The problem I'm having is that the column content (contained as HTML in the printContent variable) is being printed at 100% of the width of paper. This makes the text very small. Changing the orientation of the printed page from portrait to landscape helps a little, but not what I want.

What I'd like to be able to do is add some code to the JavaScript code above so that I could style the margins and font size of the printContent content before it is captured. I have tried doing that using document.getElementById(areaID).style = ... but it only changes the style of the (areadID) element AFTER the print window is dismissed.

Is it even possible to do what I want? If so, how?

Answer 1

As @yogi suggested, the preferred solution is to use a print media query. But if that is not applicable to you, then you can follow these steps:

• Temporarily inject a style into your document.
• Create a temporary container for the content.
• Replace the body content with the print content.
• After printing, restore the original content.

Here is a demo:

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);
}

.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>