Pha*_*son 15 javascript media styles stylesheet javascript-framework
我环顾四周,没有看到这个问题.
在Javascript中确定页面的媒体类型(例如屏幕,打印,手持设备)有什么可靠的方法？我已经看过参考文献document.styleSheets[0].media,但是由于浏览器支持问题或者因为我不理解某些东西,我没有运气使用它.
我问,因为我希望Javascript在屏幕视图中隐藏某些内容,但不能在打印视图中隐藏.不能依赖媒体相关的样式来执行此操作,因为我使用Prototype来为元素运行切换开关,并且如果将元素声明为invisible(display: none),则Prototype将不允许将元素切换为可见-inline CSS*.我试图只为元素(<div style="@media print { foo: bar; } @media screen { blargh: bfargle; }">)设置特定于媒体的内联样式,但从我所知道的,这是不受支持的.
我知道我可以在样式表中循环并检查特定于打印的链接样式表是否处于活动状态,但我目前处于一种情况,即在单个链接样式表中混合了各种特定于介质的样式声明,所以这不好.是的,我可以将样式表拆分成不同的媒体类型,但我首先要弄清楚我是否可以用Javascript从DOM中可靠地拉出媒体类型,完全独立于CSS.哦,我已经尝试了"为打印视图隐藏元素,然后检查它是否可以用Javascript显示"但是那个'尽管这些元素不可见.如果有人想了解我在这里谈论的更多细节,我可以在编辑中详细说明.
*这是我没有理解的东西,并且经常被激怒.任何可以提供任何洞察力的人都会得到我的大力支持.
\n\n\n
display: none[..]，如果使用非内联 CSS将元素声明为不可见 ( )，则 Prototype 将不允许将其切换为可见。这是我不理解并且经常感到恼火的事情。
show您可能已经看到了这一点，但是例如（还有其他具有相同注释的相关函数）的文档指出：
\n\n\n
Element.show无法显示通过 CSS 样式表隐藏的元素。请注意，这不是 Prototype 限制，而是 CSSdisplay属性工作方式的结果。
所以，这是一个已知的问题，他们归咎于 CSS。但是，请考虑以下文档（我之前没有使用过 Prototype，所以我不确定这是否是等待 DOM 加载的推荐方法，但它似乎有效）：
\n<!doctype html>\n<script src="prototype.js"></script>\n<script>\ndocument.observe("dom:loaded", function() {\n $("victim").show();\n});\n</script>\n<style>\np#victim {display:none;}\n</style>\n<p id="victim">Hello world!\n如您所知，这是行不通的。为什么？display那么，当你告诉p#victim自己时，Prototype 如何知道将属性“重置”为什么show？（换句话说：display如果display: none选择器的规则集中不存在，它如何找出应该是什么值p#victim。）答案很简单：不能。（想一想。如果另一个规则集会修改 的值，display如果display: none我们的规则集中不存在p#victim选择器的话怎么办？（即我们不能假设egp总是应该设置为block，其他规则集可能已更改该值。）我们无法display从样式表的规则集中删除该属性，并且无法删除元素与规则集之间的整个连接，因为它可能包含其他属性等（即使恕我直言，找到使用哪个规则集来执行此操作可能并不明显）。当然，我们可以继续这样做，但据我所知，这个问题没有已知的解决方案。）
那么为什么内联替代方案有效呢？首先我们看一下show是如何实现的：
show: function(element) {\n element = $(element);\n element.style.display = \'\'; // <-- the important line\n return element;\n}\n事实上，这个函数所做的唯一重要的事情就是设置element.style.display为一个空字符串 ( \'\')，它将display从style. 伟大的！但是，这是什么意思？我们为什么要删除它？首先我们必须弄清楚element.style当我们修改它的值时实际上代表和修改了什么。
MDC 文档element.style指出：
\n\n返回一个表示元素
\nstyle属性的对象。
注意最后一个词：属性。element.style\xe2\x89\xa0 元素的当前“计算”样式，它只是属性中的属性列表style（有关更长/更好的解释，请参阅 MDC）。
考虑以下文档：
\n<!doctype html>\n<script src="prototype.js"></script>\n<script>\ndocument.observe("dom:loaded", function() {\n $("victim").show();\n});\n</script>\n<p id="victim" style="display:none;">Hello world!\nstyle="display:none;"隐藏p#victim，但当 DOM 完成加载时 Prototype 会将其更改为style=""，并且浏览器将重新计算该display属性的值（在本例中为浏览器默认样式表中的值）。
但是，请考虑以下文档：
\n<!doctype html>\n<script src="jquery.js"></script>\n<script>\n$(document).ready(function(){\n $("#victim").show();\n});\n</script>\n<style>\np#victim {display:none;}\n</style>\n<p id="victim">Hello world!\n无论如何，在这种情况下，jQuery 都能正确处理样式表内容！这并不像 Prototype 解决方案那么容易解释，而且我现在需要阅读很多层的精彩内容，并且在很多情况下 jQuery 无法计算 的正确值display。（最后一点：Firebug...，但我猜它使用了一些 Firefox 独有的东西或其他东西。）
| 归档时间： |
|
| 查看次数： |
9125 次 |
| 最近记录： |