Question

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

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

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

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

感谢。

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

Answer 1

这是你在那里进行的一个有趣的困境。在我的脑海中，我唯一能想到的是在标题中添加一个新标签，其中声明了font-size！！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

似乎你要做的就是myabe只需用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>标记解决方案是值得的。

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

4 个答案: