メディア固有のCSSプロパティをJavascriptから変更する

Question

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

したがって、javascriptは画面の表示にも影響するため、フォントの値を変更することはできません。フォントプロパティの印刷バージョンのみを変更する方法はありますか？

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

そのようにして、印刷CSSでは、font：printfontと画面CSS font：12と言うことができます。そして、printfontの値を変更すると、印刷時にのみフォントが変更されます。

ありがとうございました。

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

Answer 1

はあなただけ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 2

でアイテムにクラスを追加されて何をしたいのかのように思えます。私の頭の上から、私が考えることができる唯一のことはあなたのfont-sizeが！importantで宣言されているヘッダーに新しいタグを追加することです。たとえば、あなたの頭のタグでは：

<style type="text/css" media="print"> 

.printfont { 
    font-size: 16px !important; 
} 

</style> 

これにより、新しいフォントサイズが優先されます。

次はあなたがちょうどあなたがあなたのドロップダウンの属性としてのonchange =「changeMediaStyleを（）」を持っていることを確認してください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> 

でこれを達成できるかの非常に簡単な例です。また、私の例で免責事項として、私はメモリリークのようなものを考慮していないので、あなた自身でこれらの種類の問題を解決しなければなりません。

私の知る限り、本質的にCSS変数であることを宣言/使用する方法はありません。しかし、勧告はそれのためにそこに現在があります：http://disruptive-innovations.com/zoo/cssvariables/

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：あなたは、その後のような何かを行うにはjQueryを使用することができ

@print * {font-family:comicSans;} 

：

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

（あなたもjQueryのせずにそれを行うことが、私はその構文を忘れて、それを調べるのが面倒だが、 - ））。

しかし、少量の変更しか行っていない場合は、単一のスタイルシートと別のクラスが適しています。新しい<link>タグソリューションは、さまざまなスタイル変更が発生した場合にのみ価値があります。