如何在jQuery中檢測當前頁面媒體類型

我有一個包含輸入字段的頁面。當頁面處於媒體類型打印時，我想隱藏所有0值文本字段。如何在jQuery中檢測當前頁面媒體類型

我試過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，但沒有下載選項。

來源

2012-10-19 Mifas

如果你只想隱藏與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; 
    } 
}

來源

2012-10-19 03:10:24 Blender

感謝您的代碼人。 – Mifas

定義對於媒體打印CSS文件只包含：

.empty 
{ 
    display: none; 
}

包括在你的法師這個CSS文件，只爲介質打印

添加監聽器Click事件的按鈕。這個監聽器將爲空輸入添加空的CSS類。

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

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

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

    }); 
});

對於媒體屏幕，這個類會做什麼，但對於媒體的打印將改變顯示爲沒有。

來源

2012-10-19 03:15:35 MatRt

如果你想找出一個特定的樣式表的媒體類型，你可以在jQuery的做到這一點：

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

你不得不分開你的樣式表，並加載它們的標記與媒體屬性，而不是在一個文件中使用媒體查詢。

來源

2012-10-19 03:15:50 elclanrs

如何在jQuery中檢測當前頁面媒體類型

回答

相關問題