为每个摘要标签设置标题属性（如果其父详细信息标签已打开）？

Question

我想为每个摘要标签添加一个“显示”或“隐藏”标题，这取决于其父详细信息标签是否打开：

<details open>
        <summary>Summary 1</summary>
        <p>text 1</p>
</details>

<details open>
        <summary>Summary 2</summary>
        <p>text 2</p>
</details>

我试过了，但即使未设置为打开，它也只显示“隐藏”：

var detailsElem = document.getElementsByTagName('details');
var summaryElem = document.getElementsByTagName('summary');

for (i = 0; i < summaryElem.length; i++) {
  if (detailsElem[i].display === '') {
  summaryElem[i].title = 'show';
  } else {
  summaryElem[i].title = 'hide';
  }
}

Answer 1

我假设您正在尝试访问元素css属性。 如果是这样，则此行是错误的detailsElem[i].display === '' 。

它应该是detailsElem[i].style.display 。

而且display不能为空，值可以是display ， inline ， inline-display ， none 。

这是访问元素css属性的更好的解决方案。 使用getComputedStyle()方法获取计算样式

var detailsElem = document.getElementsByTagName('details');
var summaryElem = document.getElementsByTagName('summary');

for (i = 0; i < summaryElem.length; i++) {
  var style = getComputedStyle(detailsElem[i]);
  if (style.display === 'none') {
    summaryElem[i].title = 'show';
  } else {
    summaryElem[i].title = 'hide';
  }
}