如何填充隐藏的元素

how to shim elem.hidden properly

本文关键字：隐藏 元素 填充 何填充      更新时间：2023-09-26

简介

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] { display:none }

请参阅Boris Zbarsky对强制浏览器忽略HTML5功能的回答，以及随后的评论。

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

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

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

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

相关文章：