為每個摘要標簽設置標題屬性（如果其父詳細信息標簽已打開）？

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