Question

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

在Javascript中确定页面媒体类型（例如屏幕，打印，手持设备）的可靠方式是什么？我看过document.styleSheets[0].media的引用，但我有过没有运气使用它，或者是因为浏览器支持问题，或者是因为我不理解某些东西。

我问，因为我希望Javascript在屏幕视图中隐藏某些内容，但不能在打印视图中隐藏。不能依赖媒体相关的样式来执行此操作，因为我使用Prototype来为元素运行切换开关，并且如果元素被声明为不可见，则Prototype将不允许将元素切换为可见（{{1使用非内联CSS *。我试图为元素（display: none）设置特定于媒体的内联样式，但从我所知，这是不受支持的。

我知道我可以遍历样式表并检查特定于打印的链接样式表是否处于活动状态，但我目前处于这样一种情况：各种特定于媒体的样式声明都混合在一起链接样式表，所以没有好处。是的，我可以将样式表分成不同的媒体类型，但我首先要弄清楚我是否可以用Javascript从中完全独立于CSS来可靠地将媒体类型拉出DOM / strong>即可。哦，我已经尝试了“隐藏打印视图的元素，然后检查它是否可见Javascript”的技巧“但这总是导致（当我加载打印预览时）Javascript detemining that the-to-隐藏元素是可见的，并执行我告诉它的任何DOM操作，尽管这些元素不是可见的事实。如果有人想了解我在这里谈论的更多细节，我可以在编辑中详细说明。

*这是我不理解的事情，并且经常被激怒。任何可以提供任何洞察力的人都会得到我的大力支持。

Answer 1

[..]，如果使用非内联CSS将元素声明为不可见（display: none），则Prototype将不允许将元素切换为可见元素。这是我不理解的事情，并且经常被激怒。任何可以提供任何洞察力的人都会得到我的大力支持。

您可能已经看过这个但是show（有相同注释的其他相关函数）声明：

Element.show 无法显示通过CSS样式表隐藏的元素。请注意，这不是Prototype限制，而是CSS display属性如何工作的结果。

所以，这是一个已知的问题，他们责怪CSS。但是，请考虑以下文档（我以前没有使用过Prototype，所以我不确定这是否是等待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本身时，Prototype如何知道“重置”show属性的内容？（换句话说：如果带有display选择器的规则集中没有display: none，它怎么能找出p#victim的值应该是什么。）答案很简单：它不能。（考虑一下。如果我的规则集中display与display: none选择器不存在，则另一个规则集会修改p#victim的值会怎样？（即我们可以'假设例如p总是应该设置为block，其他规则集可能已经更改了该值。）我们无法从样式表中的规则集中删除display属性，并且我们无法删除元素和规则集之间的整个连接，因为它可能包含其他属性等等（即使有可能，imho，非显而易见的规则集当然，我们可以继续这样做，但是afaik没有解决这个问题。）

那为什么内联替代方案有效呢？首先，让我们看一下show的实现方式：

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

此功能唯一重要的功能是将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完成加载时，Prototype会将其更改为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无法计算display的正确值。（快速的最后一点：Firebug ......，但我猜它会使用一些Firefox独有的东西。）

Answer 2

编辑：对不起（请注意自己：RTFQ Rob，sheesh！）。如果有任何用途，可以快速搜索this up和jquery plugin。它基本上是使用@media规则，但我没有内联，所以你的浏览器支持可能会有所不同，但这是你能想到的最好的想法：（

Answer 3

看看这是否有效......我认为你可以为每种类型执行此操作，只检查语句是返回null还是等效，然后应用规则。

从此网站： http://www.webdeveloper.com/forum/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语句中作为布尔值true / false工作！希望你能让它发挥作用！

Answer 4

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

Answer 5

我已经测试了上面提到的脚本 - 它现在适用于所有新浏览器，包括。 IE8决赛。

脚本移到此处：http://cssmedia.pemor.pl/ 如果您愿意，请随意使用它。

关心 Marcin Wiazowski

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

5 个答案: