9

Javascript (プルダウン) から変更できるようにする必要がある CSS プロパティ (フォント) があります。ただし、このフォントは印刷時 (@media print) にのみ使用してください。

そのため、javascript はフォントの値を変更することはできません。これは、画面ビューにも影響するためです。フォント プロパティの印刷バージョンのみを変更する方法はありますか?

または、CSS プロパティを別のプロパティへの参照にする方法はありますか?

そうすれば、印刷 CSS では font:printfont、画面 CSS では font:12 と言えます。次に、printfont の値を変更すると、印刷時のフォントのみが変更されます。

ありがとう。

編集:要点は、ドキュメントが印刷されるフォント サイズをプルダウンから変更できるようにする必要があることですが、ドキュメントが表示されるフォント サイズを変更したくありません。

4

4 に答える 4

10

それはあなたがそこで起こっている興味深いジレンマです。私が考えることができる唯一のことは、フォントサイズが！importantで宣言されているヘッダーに新しいタグを追加することです。たとえば、headタグでは次のようになります。

<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>してページに新しいタグを動的に追加することもできます。たとえば、次の場合：

stylesheet1.css：

@print * {font-family:verdana;}

stylesheet2.css：

@print * {font-family:comicSans;}

次に、jQueryを使用して次のようなことを行うことができます。

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

（jQueryがなくても実行できますが、その構文を忘れてしまい、検索するのが面倒です;-)）。

ただし、変更する量が少ない場合は、単一のスタイルシートと異なるクラスの方がおそらく適切な方法です。新しい<link>タグソリューションは、さまざまなスタイルの変更が発生している場合にのみ価値があります。

于 2009-04-28T15:46:17.790 に答える