从 Javascript 更改媒体特定 CSS 属性

Question

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

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

或者有没有办法让 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/

Answer 2

似乎你想要做的就是用 JS 更改或添加一个类到项目

<p class="inrto comicSans">this is the text to change</p>

@screen p.intro {font-family:verdana;}

@print p.comicSans {font-family:comic-sans;}

Answer 3

您可以只使用 JavaScript 来切换类，并拥有

@print {
  .myPrintClass { font-family: serif; }
}
@screen {
  .defaultClass { font-family: sans-serif; }
}

Answer 4

虽然基于类的解决方案完全可行，但您还可以使用 Javascript 动态地将新的

<link>

标签添加到页面。 例如，如果您有：

stylesheet1.css：

@print * {font-family:verdana;}

stylesheet2.css：

@print * {font-family:comicSans;}

然后您可以使用 jQuery 执行以下操作：

$(document.body).append("<link href='stylesheet2.css'/>");

（你也可以不用 jQuery 来做到这一点，但我忘记了语法并且懒得查找它;-)）。

但是，如果您只更改少量内容，则单个样式表+不同的类可能是更好的方法；仅当您发生大量不同的样式更改时，新的

<link>

标签解决方案才值得。