我有一个 CSS 属性（字体），我需要能够从 Javascript（下拉）中进行更改。但是，这种字体只能在打印时使用（@media print）。
因此，javascript 不能只更改字体的值，因为这也会影响屏幕视图。有没有办法只更改字体属性的打印版本？
或者，有没有办法让 CSS 属性成为对另一个属性的引用？
这样，在打印 CSS 中，我可以说字体：printfont，而在屏幕 CSS 中，我可以说字体：12。然后改变printfont的值，打印时只会改变字体。
谢谢。
编辑：关键是我需要能够从下拉菜单中更改打印文档的字体大小，但我不想更改文档显示的字体大小。
【问题讨论】：
标签： javascript css media
似乎您想要做的是 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;}
【讨论】：
这是一个有趣的困境。在我的脑海中，我唯一能想到的就是在标题中添加一个新标签，在该标题中你的字体大小用 !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/
【讨论】：
你可以只使用 JavaScript 来切换类，并拥有
@print {
.myPrintClass { font-family: serif; }
}
@screen {
.defaultClass { font-family: sans-serif; }
}
【讨论】：
虽然基于类的解决方案完全可行，但您也可以使用 Javascript 向页面动态添加新的 <link> 标记。例如，如果您有：
stylesheet1.css：
@print * {font-family:verdana;}
stylesheet2.css：
@print * {font-family:comicSans;}
然后您可以使用 jQuery 执行以下操作：
$(document.body).append("<link href='stylesheet2.css'/>");
（你也可以不用 jQuery，但我忘记了那个语法，懒得去查了 ;-)）。
但是，如果您只更改少量，则单个样式表 + 不同的类可能是更好的选择；新的<link> 标签解决方案只有在您发生大量不同的样式更改时才值得。
【讨论】：