JavaScript 可以改变@page CSS 的值吗？

Posted 2023-02-21

【中文标题】JavaScript 可以改变@page CSS 的值吗？

【英文标题】：Can JavaScript change the value of @page CSS?

【发布时间】：2012-06-24 23:48:54

【问题描述】：

以下 CSS 会影响页面默认以纵向还是横向打印。

@page 
   size: landscape;

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

这在 CSS 中作为静态值可以正常工作，但我想根据用户选择在纵向和横向之间动态切换。是否可以使用 javascript 来更改此值？

【问题讨论】：

Disabling browser print options (headers, footers, margins) from page? 的可能重复项

@J-16SDiZ：我不这么认为；我浏览了那个问题，没有看到任何关于动态更改设置的内容。

@BNL：不多；我花了一些时间在 DOM 中查找可以访问此属性的位置，但找不到任何东西。我考虑过更改样式表本身，模糊地按照 jassonpet 的回答，但这在当时对我来说似乎有问题。

【参考方案1】：

@jasssonpet 用他的回答拯救了我。话虽如此，我将其更改为更简单（在我看来）。

** 不太清楚为什么会这样，但如果你知道，请告诉我。如果只是偏好，那么我将分享我的代码示例，因为其他人的偏好可能更符合我的偏好。

// just create the style tag and set the page size
function setPageSize(cssPageSize) 
    const style = document.createElement('style');
    style.innerhtml = `@page size: $cssPageSize`;
    document.head.appendChild(style);


// how to use it
setPageSize('letter landscape');

---

编辑：我有一段时间第一次登录，看到了@jasssonpet 的回答，现在对我来说更有意义了。万一其他人感到困惑，他的方法的主要好处是两件事：

他使用了闭包，因此只有 1 个样式标签添加到页面中，然后可以引用和更改。 他对 cssPagedMedia 进行了扩展，以便添加的任何方法都被命名空间。这样，全局命名空间就不会被污染。

这是 Class 形式的（我觉得更容易理解）：

class SingletonStyle 
  constructor() 
    this.style = document.createElement("style");
    document.head.appendChild(this.style);
  

  apply(rule) 
    this.style.innerHTML = rule;
  

  size(size) 
    this.apply("@page size: " + size + "");
  

【讨论】：

jassonpet 的技术在页头中创建一个 Style 元素并返回一个用于更新其值的函数。每次执行时，您的技术都会将新样式元素附加到页头。两种方式都应该有效（最近添加的 CSS 规则将始终覆盖较早的规则），但另一种技术会减少规则污染，并且更容易完全替换现有规则，因此您无需添加相互矛盾的规则。

【参考方案2】：

一种简单的方法是为@page 创建一个单独的样式并进行更改：

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

【讨论】：

我通常会等待几天将某些内容标记为正确，以防其他人提出更多见解，但这是一种很好的、​​明智的方法，而且行之有效；谢谢。

当我从 CSS 中删除 @page 声明时，它对我有用