9

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

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

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

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

谢谢。

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

4

4 回答 4

10

这是你在那里遇到的一个有趣的困境。在我的脑海中，我唯一能想到的就是在标题中添加一个新标签，在该标题中你的字体大小用 !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/

于 2009-04-28T15:40:52.450 回答
3

似乎您想要做的是 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;}
于 2009-04-28T15:38:23.673 回答
0

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

@print {
  .myPrintClass { font-family: serif; }
}
@screen {
  .defaultClass { font-family: sans-serif; }
}
于 2009-04-28T15:41:47.580 回答
0

虽然基于类的解决方案完全可以工作，但您也可以使用 Javascript 向页面动态添加新<link>标签。例如，如果您有：

样式表1.css：

@print * {font-family:verdana;}

样式表2.css：

@print * {font-family:comicSans;}

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

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

（你也可以不用 jQuery，但我忘记了那个语法，懒得去查了 ;-)）。

但是，如果您只更改少量，则单个样式表 + 不同的类可能是更好的选择；<link>仅当您发生大量不同的样式更改时，新的标签解决方案才值得。

于 2009-04-28T15:46:17.790 回答