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

Question

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

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

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

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

谢谢.

编辑:关键是我需要能够从下拉菜单中更改文档打印的字体大小,但我不想更改文档显示的字体大小.

Answer 1

这是你在那里进行的一个有趣的困境.在我的脑海中,我唯一能想到的是在标题中添加一个新标签,其中你的字体大小被声明为!important.例如,在你的头标签中:

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

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

</style>

这将确保新的font-size优先.

以下是一个非常快速的示例,说明如何使用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;}