javascript - Setting title attribute for each summary tag if its parent details tag is open? -
i want add 'show' or 'hide' title each summary tag depends if parent details tag open:
<details open> <summary>summary 1</summary> <p>text 1</p> </details> <details open> <summary>summary 2</summary> <p>text 2</p> </details>
i tried shows 'hide' though details not set open:
var detailselem = document.getelementsbytagname('details'); var summaryelem = document.getelementsbytagname('summary'); (i = 0; < summaryelem.length; i++) { if (detailselem[i].display === '') { summaryelem[i].title = 'show'; } else { summaryelem[i].title = 'hide'; } }
i assume trying access element css property. if so, line wrong detailselem[i].display === ''
.
it should detailselem[i].style.display
.
also display
cannot empty , values can either display
, inline
, inline-display
, none
...
here's better solution access element css property. use getcomputedstyle()
method computed styles
var detailselem = document.getelementsbytagname('details'); var summaryelem = document.getelementsbytagname('summary'); (i = 0; < summaryelem.length; i++) { var style = getcomputedstyle(detailselem[i]); if (style.display === 'none') { summaryelem[i].title = 'show'; } else { summaryelem[i].title = 'hide'; } }
Comments
Post a Comment