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; 
    } 
} 

나는 현재 페이지의 미디어 타이를 감지하는 경우 체육. 나는 그것을 끝낼 수있다. 불행히도 올바른 코드를 얻을 수 없습니다.

jmediatype도 시도했지만 다운로드 옵션이 없습니다. 그냥 value="0"으로 필드를 숨기려면

Answer 1

, 당신은 단지 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'); 

당신은 당신의 스타일 시트를 분리하고 미디어가 대신 속성으로 마크 업을로드해야 할 것 하나의 파일에서 미디어 쿼리를 사용합니다.