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';
  }
}

如果每个摘要标记的父详细信息标记已打开，请为其设置标题属性？

1 个答案: