jQueryで現在のページのメディアタイプを検出する方法

Question

私は入力フィールドを持つページを持っています。私はページがメディアタイプの印刷であるときに0の値のテキストフィールドをすべて非表示にしたい。

私は試しましたjQueryです。しかし、これはスクリーンモードとプリントモデルの両方で機能します。

HTML：

<div class="screen">some screen</div> 
<div class="print">some print</div> 
<input type='text' name='' id='1' class='' value='0'/> 
<input type='text' name='' id='2' class='' value='5'/> 
<button>Print</button> 

JS：

$('button').click(function(){ 
    $('input[type=text]').each(function(){ 
     if ($(this).val() == 0){ 
     $(this).hide() 
     }  
    }) 
}) 

CSS：

@media print{ 
    .screen{ 
     display:none; 
    } 

    .print{ 
     display:block; 
    } 
} 

@media screen{ 
    .screen{ 
     display:block   
    } 

    .print{ 
     display:none; 
    } 
} 

私は、現在のページのメディアTYを検出した場合pe。私はそれを終えることができます。残念ながら、私は正しいコードを取得できませんでした。

私もjmediatypeを試しましたが、ダウンロードオプションはありません。

Answer 1

あなただけvalue="0"のフィールドを非表示にしたい場合は、あなただけのCSSでこれを行うことができます。

@media print { 
    input[value="0"] { 
     display: none; 
    } 
} 

代替は、これらの要素にのみ印刷スタイルシートで隠されますクラスを与えることになります：

$('button').click(function(){ 
    $('input[type=text]').filter(function() { 
     return parseInt(this.value, 10) == 0; 
    }).addClass('print-hidden'); 
}); 

そして、このようなスタイルを使用します。

@media print { 
    .print-hidden { 
     display: none; 
    } 
} 

Answer 2

を定義しますメディアプリントのためのCSSファイルにのみ含まれている：

.empty 
{ 
    display: none; 
} 

のみ メディアプリント

のクリックイベントのボタンにリスナーを追加し、あなたの魔法使いで、このCSSファイルが含まれています。このリスナーは空の値を持つ空のCSSクラスを入力用に追加します。メディア・スクリーンの場合

$("ID_OF_YOUR_BUTTON").click(function(mouseEvent) { 

    $("input[type=text]").each(function(index, element) { 

     if ($(element).val().length == 0) 
      $(element).addClass("empty"); 

    }); 
}); 

、このクラスでは何もしませんが、メディアプリントのためには、なしに表示を変更します。

Answer 3

あなたはjQueryの中でこれを行うことができ、特定のスタイルシートのメディアタイプを知りたい場合は、次の

var media = $('link[href$="styles.css"]').attr('media'); 

をあなたのスタイルシートを分離し、代わりに、メディア属性でマークアップでそれらをロードする必要があると思います1つのファイルでメディアクエリを使用する