如何使用 jQuery 设置 @page CSS 属性？

Question

One can make a page be printed in landscape mode with

@page {size: landscape;}

But I only want a page to be printed in landscape when some conditions are met (eg when there is wide content on the page).

How can I set this attribute with jQuery / JavaScript?

What doesn't work

$('@page')
Uncaught Error: Syntax error, unrecognized expression: @page

Answer 1

Your jQuery is trying to select some element named page and with invalid selector @ .

All you need to do is add @page{size: landscape;} to CSS

$('head').append('<style>@page{size: landscape;}</style>')

Answer 2

You can access the rule via the styleSheets collection and change its size.

Here's an example: The CSS declares @page { size: landscape; } @page { size: landscape; } and then the code changes it to portrait :

 Array.from(document.styleSheets).forEach(ss => { Array.from(ss.rules || ss.cssRules).forEach(rule => { if (rule instanceof CSSPageRule) { rule.style.size = "portrait"; console.log("New rule size: " + rule.style.size); } }); });

 @page { size: landscape; }

That example keeps going to find all CSSPageRules , but if you know there's only one you could use some instead:

Array.from(document.styleSheets).some(
    ss => Array.from(ss.rules || ss.cssRules).forEach(rule => {
      if (rule instanceof CSSPageRule) {
        rule.style.size = "portrait";
        console.log("New rule size: " + rule.style.size);
        return true;
      }
    })
);