如何确定 Javascript 中的媒体类型？

StackOverflow https://stackoverflow.com/questions/494235

题

我环顾四周，还没有看到有人问这个问题。

Javascript 中确定媒体类型的可靠方法是什么（例如屏幕、打印、手持）页面？ 我看过参考文献 document.styleSheets[0].media, ，但我没有运气使用这个，要么是因为浏览器支持问题，要么是因为我不理解某些东西。

我这么问是因为我希望 Javascript 在屏幕视图中隐藏某些内容，但不在打印视图中隐藏。不能依赖媒体相关的样式来执行此操作，因为我使用 Prototype 为元素运行切换开关，并且 Prototype 不允许将元素切换为可见（如果该元素被声明为不可见）（display: none) 与非内联 CSS*。我尝试为元素设置特定于媒体的内联样式（<div style="@media print { foo: bar; } @media screen { blargh: bfargle; }">），但据我所知，这是不支持的。

我知道我可以循环浏览样式表并检查特定于打印的链接样式表是否处于活动状态，但我目前所处的情况是各种特定于媒体的样式声明都混合在单个链接样式表中，所以那不行。是的，我可以将样式表分成不同的媒体类型，但我首先想弄清楚是否可以使用 Javascript 可靠地将媒体类型从 DOM 中提取出来， 完全独立于CSS. 。哦，我尝试过“隐藏打印视图的元素，然后检查它是否对 Javascript 可见”的技巧，但这总是导致（当我加载打印预览时）Javascript 确定应该-隐藏的元素是可见的，并且执行我告诉它的任何 DOM 操作， 尽管 这些元素的事实 不是 可见的。如果有人想了解我在这里谈论的更多细节，我可以在编辑中详细说明。

*这是我不理解并且经常感到恼火的事情。任何能够提供任何见解的人都会得到我的大力支持。

有帮助吗？

解决方案

  

[..]，原型将不允许元件与非内联CSS被切换到可见，如果它被声明不可见（display: none）。这是什么，我没有理解和我总是被激怒。任何人都可以提供任何洞察从我这得到了很大的给予好评。

您可能已经看到了这一点但例如文档 show （存在具有相同的音符其他相关功能）指出：

  

Element.show 不能通过CSS样式表隐藏显示元件。请注意，这不是一个原型限制，但的CSS属性display如何运作的结果。

所以，这是一个已知的问题，他们指责CSS。然而，考虑以下文件（我以前没有使用原型，所以我不知道这是推荐的方式等待DOM加载，但它似乎工作）：

<!doctype html>
<script src="prototype.js"></script>
<script>
document.observe("dom:loaded", function() {
  $("victim").show();
});
</script>
<style>
p#victim {display:none;}
</style>
<p id="victim">Hello world!

正如你已经知道，这是不行的。为什么？那么，如何将原型知道该怎么“重置” display属性，当你告诉p#victim到show本身？ （换句话说：它如何能够找出应该已经display的值，如果display: none不存在与p#victim选择的规则集。）答案很简单：它不能。 （想想它的第二个。如果另一个规则集将修改display的值，如果display: none是不存在于我们与p#victim选择？（即我们不能假设如p始终应设置为block规则集，其他规则集可能已经改变该值。）我们不能除去在样式表从一个规则集的属性display，我们不能去除元件和规则集之间的整个连接，因为它可以含有其它属性等（即使有可能这将是，恕我直言，无明显找到的规则集与做的其中）。当然，我们可以用这继续下去，但据我所知，没有已知的解决这个问题的。）

那么为什么内嵌替代工作？首先，让我们看看show是如何实现的：

show: function(element) {
  element = $(element);
  element.style.display = ''; // <-- the important line
  return element;
}

AFAICT这个函数的唯一重要的事情是element.style.display设置为一个空串（''），其中“去除”从display style。大！但是，这是什么意思？我们为什么要删除它？首先，我们必须找出element.style实际上代表，当我们修改其值修改。

有 element.style 的MDC文档指出：

  

返回表示该元素的style属性的对象。

请注意的最后一个字：属性。 element.style≠当前“计算”风格的元素，它只是在style属性（参见MDC较长/更好的解释）。

的属性的列表

考虑下面的文件：

<!doctype html>
<script src="prototype.js"></script>
<script>
document.observe("dom:loaded", function() {
  $("victim").show();
});
</script>
<p id="victim" style="display:none;">Hello world!

style="display:none;"隐藏p#victim但是当DOM完成加载原型将改变它style=""，并且浏览器将重新计算的display属性（从浏览器的默认的样式表在这种情况下的值）的值。

但是，考虑下面的文件：

<!doctype html>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("#victim").show();
});
</script>
<style>
p#victim {display:none;}
</style>
<p id="victim">Hello world!

jQuery的处理样式表正确的东西，在这种情况下呢！这不是简单的原型解决方案来解释和有以迷死很多层，我通过现在读，有许多情况下，jQuery的˚F苦恼的来计算display正确的值。 （快速最后一个音符：萤火虫......，但我想它使用了一些Firefox的独家的东西或事情）

其他提示

编辑：抱歉（自我提醒：RTFQ 罗布，天啊！）。快速谷歌搜索草皮 这个 和一个 jquery插件 如果那有什么用的话。它基本上使用 @media 规则，但据我所知不是内联的，因此您的浏览器支持可能会有所不同，但我认为这是您可以期望的最好的:(

......

请参阅，如果这个工程，我认为你能为每一个类型的做到这一点，只是检查是否语句返回null或同等学历，然后将您的规则。

从这个网站：的 HTTP：//www.webdeveloper。 COM /论坛/ showthread.phpΔT= 82453

  

IE：

     

if (document.styleSheets[0].media == 'screen'){...}

     

FF / NS：

     

document.getElementsByTagName ('LINK')[0].getAttribute ('media')

     

或

     

document.styleSheets[0].media.mediaText

和脚本在所有浏览器检查（除了一些新的，所以一定要小心：））

<强> http://student.agh.edu.pl/~marcinw / cssmedia /

该脚本的if语句可以作为一个布尔真/假的！ 希望你会得到它的工作！

document.getElementsByTagName('link').each(function( link )
{
  //do something with link.media
  //hide whatever you need to hide, etc
});

我测试过我的剧本上面提到 - 现在所有新的浏览器，含工作。 IE8最终

在这里脚本移动： http://cssmedia.pemor.pl/ 随意，只要你想使用它。

使用问候 马尔钦Wiazowski

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top