親詳細タグが開いている場合は、各要約タグのtitle属性を設定しますか？

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プロパティにアクセスするためのよりよい解決策です。私は `detailsElem [i]が.display === ''`常に、falseと評価され、したがって ` 'hide'`引き受ける計算されたスタイル

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