如何使用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，但没有下载选项。

- KKK

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

- Blender

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");

    });
});

对于媒体屏幕，这个类不会有任何作用，但对于媒体打印，它将把显示更改为无。

- MatRt

Answer 3

如果您想查找特定样式表的媒体类型，可以在jQuery中执行以下操作：

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

您需要将样式表分离并使用媒体属性在标记中加载它们，而不是在一个文件中使用媒体查询。

- elclanrs