javascript - 从 Javascript 更改媒体特定的 CSS 属性

Question

我有一个 CSS 属性(字体)，我需要能够从 Javascript(下拉列表)更改它。但是，这种字体只能在打印时使用(@media print)。

因此，javascript 不能只更改字体的值，因为这也会影响屏幕 View 。有没有办法只更改字体属性的打印版本？

或者有没有办法让 CSS 属性成为对另一个属性的引用？

这样，在打印 CSS 中，我可以说 font:printfont，而在屏幕 CSS 中，我可以说 font:12。然后改变printfont的值，打印时只会改变字体。

谢谢。

编辑:重点是我需要能够从下拉菜单中更改打印文档的字体大小，但我不想更改文档显示的字体大小。

Answer 1

你在那里遇到了一个有趣的困境。在我的脑海中，我唯一能想到的就是在用 !important 声明字体大小的标题中添加一个新标签。例如，在你的头标签中:

<style type="text/css" media="print">

.printfont {
    font-size: 16px !important;
}

</style>

这将确保新的字体大小优先。

以下是一个非常简单的示例，说明如何使用 javascript 完成此操作

<script type="text/javascript">

    var inlineMediaStyle = null;

    function changeMediaStyle ()
    {
        var head = document.getElementsByTagName('head')[0];
        var newStyle = document.createElement('style');
        newStyle.setAttribute('type', 'text/css');
        newStyle.setAttribute('media', 'print');
        newStyle.appendChild(document.createTextNode('.printFont { font-size: 16px !important;}'));

        if (inlineMediaStyle != null)
        {
            head.replaceChild(newStyle, inlineMediaStyle)
        }
        else
        {
            head.appendChild(newStyle);
        }
        inlineMediaStyle = newStyle;
    }

</script>

只需确保将 onchange="changeMediaStyle()"作为下拉列表的属性。另外，作为我示例中的免责声明，我没有考虑内存泄漏之类的问题，因此您必须自己解决此类问题。

关于您的备选问题，据我所知，没有任何方法可以声明/使用本质上是 CSS 变量的内容。但是，目前有一个建议:http://disruptive-innovations.com/zoo/cssvariables/