從Javascript更改媒體特定的CSS屬性

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>

這將確保新的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;}

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>標簽解決方案是值得的，如果您發生了一系列不同的樣式更改。