3

介绍

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

浏览器支持不是很好，所以我想对其进行填充。如果我要填充这个属性，那么在通过elem.style.

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"or<original value>吗？
  • 它应该设置elem.style.visibility为"hidden"or"visible"吗？
4

2 回答 2

3

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

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

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

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

在元素属性方面，HTML5 规范说“隐藏的 IDL 属性必须反映同名的内容属性。”，所以这是您应该通过 Object.defineProperty 添加的唯一内容。然而，肯尼贝克关于 Object.defineProperty 没有得到更广泛支持的评论可能是有效的。

于 2012-01-26T17:26:49.250 回答
1

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

于 2012-01-26T17:15:17.907 回答