我有一个 CSS 属性(字体),我需要能够从 Javascript(下拉列表)更改它。但是,这种字体只能在打印时使用(@media print)。
因此,javascript 不能只更改字体的值,因为这也会影响屏幕 View 。有没有办法只更改字体属性的打印版本?
或者有没有办法让 CSS 属性成为对另一个属性的引用?
这样,在打印 CSS 中,我可以说 font:printfont,而在屏幕 CSS 中,我可以说 font:12。然后改变printfont的值,打印时只会改变字体。
谢谢。
编辑:重点是我需要能够从下拉菜单中更改打印文档的字体大小,但我不想更改文档显示的字体大小。
最佳答案
你在那里遇到了一个有趣的困境。在我的脑海中,我唯一能想到的就是在用 !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 - 从 Javascript 更改媒体特定的 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/798535/