[英]Setting title attribute for each summary tag if its parent details tag is open?
I would want to add a 'show' or 'hide' title for each summary tag which depends if its parent details tag is 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 this but it only shows 'hide' even though the details is not set to open: 我试过了,但即使未设置为打开,它也只显示“隐藏”:
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';
}
}
I assume you are trying to access element css property. 我假设您正在尝试访问元素css属性。 If so, then this line is wrong detailsElem[i].display === ''
. 如果是这样,则此行是错误的detailsElem[i].display === ''
。
It should be detailsElem[i].style.display
. 它应该是detailsElem[i].style.display
。
Also display
cannot be empty and values can be either display
, inline
, inline-display
, none
... 而且display
不能为空,值可以是display
, inline
, inline-display
, none
。
Here's the better solution to access element css property. 这是访问元素css属性的更好的解决方案。 Use getComputedStyle()
method to get computed styles 使用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';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.