JavaScript可以更改@page CSS的值吗？ [英] Can JavaScript change the value of @page CSS?

问题描述

以下CSS会影响网页默认以纵向或横向打印。

The following CSS affects whether a page prints in portrait or landscape by default.

@page {
   size: landscape;
}

我意识到这只适用于非常有限的一组浏览器，用户可以覆盖它。没关系;我只是想提供一个良好的默认。

I realize that this only works on a very limited set of browsers, and that the user can override it. That's okay; I'm just trying to provide a good default.

这在CSS中作为一个静态值很好，但我想在纵向&景观基于用户选择。是否可以使用JavaScript更改此值？

This works fine as a static value in CSS, but I'd like to switch dynamically between portrait & landscape based on on user choices. Is it possible to use JavaScript to change this value?

推荐答案

一个简单的方法是为@page创建单独的样式， it：

One simple way is to create a separate style for @page and change it:

var cssPagedMedia = (function () {
    var style = document.createElement('style');
    document.head.appendChild(style);
    return function (rule) {
        style.innerHTML = rule;
    };
}());

cssPagedMedia.size = function (size) {
    cssPagedMedia('@page {size: ' + size + '}');
};

cssPagedMedia.size('landscape');

这篇关于JavaScript可以更改@page CSS的值吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！