gpt4 book ai didi

javascript - 你如何确定 JavaScript 中的媒体类型?

转载 作者:可可西里 更新时间:2023-11-01 01:34:28 26 4
gpt4 key购买 nike

JavaScript 中确定页面媒体类型(例如屏幕、打印、手持设备)的可靠方法是什么?我看到了对 document.styleSheets[0].media 的引用,但由于浏览器支持问题或因为我不了解某些内容,所以我没有使用它。

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

我知道我可以循环浏览样式表并检查特定于打印的链接样式表是否处于事件状态,但我目前处于各种特定于媒体的样式声明都混合在一个单一环境中的情况链接样式表,所以这不好。是的,我可以将样式表拆分为不同的媒体类型,但我首先想弄清楚我是否可以使用 JavaScript 可靠地将媒体类型从 DOM 中提取出来,完全独立于 CSS.

我已经尝试过“隐藏打印 View 的元素,然后使用 JavaScript 检查它是否可见”的技巧,但这总是导致(当我加载打印预览时)JavaScript 确定应该-被隐藏的元素是可见的,并且执行我告诉它的任何 DOM 操作,尽管这些元素是可见的。如果有人想了解我在这里谈论的内容的更多细节,我可以在编辑中详细说明。

*这是我一直不理解并且经常被激怒的事情。

最佳答案

[..], Prototype won't allow an element to be switched to visible if it was declared invisible (display: none) with non-inline CSS. This is something that I haven't understood and am constantly irritated by.

您可能已经看过这个,但是例如文档show (还有其他具有相同注释的相关函数)指出:

Element.show cannot display elements hidden via CSS stylesheets. Note that this is not a Prototype limitation but a consequence of how the CSS display property works.

所以,这是一个已知问题,他们责怪 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!

如您所知,这是行不通的。为什么?好吧,当您告诉 p#victim show 本身时,Prototype 怎么知道要将 display 属性“重置”为什么? (换句话说:如果 display: none 没有出现在 p 的规则集中,它如何找出 display 的值应该是什么? #victim 选择器。)答案很简单:不能。 (想一想。如果 display: none 不存在于我们的规则集中,如果另一个规则集修改 display 的值会怎样?p #victim 选择器?(即我们不能假设 p 总是应该设置为 block,其他规则集可能已经更改了该值。)我们可以不要从样式表的规则集中删除 display 属性,我们也不能删除元素和规则集之间的整个连接,因为它可能包含其他属性等等(即使它会恕我直言,找到哪个规则集来执行此操作可能不是很明显。当然,我们可以继续进行下去,但据我所知,这个问题没有已知的解决方案.)

那为什么内联替代方案有效呢?首先,让我们看一下 show 是如何实现的:

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

Afaict 这个函数做的唯一重要的事情是将 element.style.display 设置为空字符串 (''),它“删除”display 来自样式。伟大的!但是,这是什么意思?我们为什么要删除它?!首先,我们必须找出 element.style 在我们修改其值时实际上代表和修改的是什么。

element.style 的 MDC 文档指出:

Returns an object that represents the element's style attribute.

注意最后一个词:属性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 正确处理样式表的东西,在这种情况下无论如何!这并不像 Prototype 解决方案那样容易解释,现在有很多层次让我通读,而且在很多情况下 jQuery 无法为 display 计算正确的值. (最后一点:Firebug...,但我猜它使用了一些 Firefox 独有的东西或其他东西。)

关于javascript - 你如何确定 JavaScript 中的媒体类型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/494235/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com