如何在jQuery中检测当前页面媒体类型
如何在jQuery中检测当前页面媒体类型
提问于 2012-10-19 03:06:36
我有一个带有输入字段的页面。当页面处于媒体类型打印时，我想隐藏所有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，但是没有下载选项。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-10-19 03:10:24
如果您只想用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;
}
}Stack Overflow用户
发布于 2012-10-19 03:15:35
只为媒体打印定义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");
});
});对于媒体屏幕，这个类将什么都不做，但是对于媒体打印，它将将显示更改为none。
Stack Overflow用户
发布于 2012-10-19 03:15:50
如果您想找出特定样式表的媒体类型，可以在jQuery中这样做：
var media = $('link[href$="styles.css"]').attr('media');您必须分离样式表，并使用media属性在标记中加载样式表，而不是在一个文件中使用媒体查询。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12966804
复制相关文章
相似问题
腾讯云开发者
