如何正确填充 elem.hidden答案

【问题标题】：how to shim elem.hidden properly如何正确填充 elem.hidden
【发布时间】：2012-01-26 17:07:45
【问题描述】：

简介

elem.hidden 是一个新属性，允许隐藏元素并检测它们是否被隐藏。

浏览器支持不是很好，所以我想对其进行填充。如果我要填充这个属性，在通过elem.style 设置 CSS 属性方面应该填充什么。

Shim 的简单实现

Object.defineProperty(HTMLElement.prototype, "hidden", {
  get: function get() {
    return this.style.<???>;
  },
  set: function set(v) {
    this.style.<???> = v ? <???> : <???>
  },
  configurable: true
});

问题

应该将elem.style.display 设置为"none" 还是<original value>？
应该将elem.style.visibility 设置为"hidden" 还是"visible"？

【问题讨论】：

大部分不支持 hidden 属性的浏览器也不支持 Object.defineProperty。
@kennebec 在 >= IE8 中工作，而其他浏览器通常在其最新版本中也能正常工作。
@kennebec 因此这是一个幼稚的实现。完整的垫片使用垫片Object.defineProperty 用于 IE8+ 和 pals，并使用 htc 文件用于 IE6/7

标签： javascript html polyfills

【解决方案1】：

浏览器需要将隐藏属性实现为[hidden] { display:none }

请参阅 Boris Zbarsky 对 Force browser to ignore HTML 5 features 的回答以及后续的 cmets。

请注意，这是通过用户代理样式表完成的，因此它的特异性非常低，并且很容易被更具体的样式覆盖，即使是那些没有提及隐藏属性的样式。

虽然我认为这是实现隐藏属性的糟糕方式，但这些都是规则。最接近该行为的方法是将[hidden] { display:none } 尽可能靠近 HTML 页面上第一个样式表的开头，而不是直接应用于元素的 style 属性，它会有一个非常高特异性。

在元素属性方面，the HTML5 spec 说“隐藏的 IDL 属性必须反映同名的内容属性。”，所以这是您应该通过 Object.defineProperty 添加的唯一内容。但是，kennebec 关于 Object.defineProperty 没有得到更广泛支持的评论可能是正确的。

【讨论】：

既然“实现隐藏属性的方法很糟糕”，那么更好的方法是什么？
@Raynos - 这是一个有趣的问题。对于浏览器，我认为创建一个与 display:none 或 visibility:collapse 具有类似行为的新 css 属性会更好。假设你可以说类似 [hidden] { -moz-relevance:irrelevant;等，那么它只能被另一个针对该特定属性的 CSS 规则覆盖。不利的一面是已经隐藏内容的 CSS 属性的扩散。
@Raynos - 恕我直言，它的实现应该与<input type="hidden" /> 相同（或几乎相同）。即，你不能不小心用 css 覆盖它：jsfiddle.net/WXy4W
不幸的是，如果您覆盖了 display 属性，那么 CSS 选择器就不够精确。您可能必须使用!important...

【解决方案2】：

visibility: hidden 元素仍然需要渲染，因为它们在屏幕上占据了空间，因此 display: none 更接近于 .hidden = true，因为 display: noneelements 可以并且将被忽略渲染。

【讨论】：