Question

简介

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"？

Answer 1

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

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

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

虽然我认为这是实现隐藏属性的一种可怕方式，但这些是规则。离您最近的行为是将[hidden] { display:none }尽可能地放在HTML页面第一个样式表的最开头，而不是直接应用于元素的样式属性，它将具有具有很高的特异性。

就元素属性而言，the HTML5 spec表示“隐藏的IDL属性必须反映同名的内容属性。”，这是您应该通过Object.defineProperty添加的唯一内容。但是，肯尼贝克关于Object.defineProperty得到更广泛支持的评论可能是有效的。

Answer 2

visibility: hidden个元素仍然需要在屏幕上占用空间时进行渲染，因此display: none更接近.hidden = true因为display: none元素可以并且将被忽略渲染-wise。

如何正确地使用elem.hidden

简介

简单实施Shim

问题

2 个答案: