details
顾名思义,就是显示细节的,点击展开,再次点击关闭显示。
当details
展开时,会在标签上添加一个属性open=“open"'
当然也可以默认带有open
属性的,那么就是默认展开显示
<details> <p>这是一段文字1</p> </details> <details open> <p>这是一段文字2</p> </details>
Summary
就是摘要,它一般和details
配合使用,示例如下:
<details> <summary>摘要文字</summary> <p>这是一段文字1</p> </details> <hr> <details open> <summary>摘要文字</summary> <p>这是一段文字2</p> </details>
<details> <summary>摘要文字1</summary> <p>这是一段文字1</p> <details open> <summary>摘要文字2</summary> <p>这是一段文字2</p> </details> </details>
你可以发现,现在标签有默认样式,这一搬不是我们所需要的,那么你可以自定义CSS样式:
/* 设置打开时的样式 */ details[open] { /* 在这里添加你的样式 */ background-color: #ddd; } /* 设置打开时的样式 Webkit内核的浏览器使用伪元素来解决这个问题:::-webkit-details-marker。通过这个伪元素,我们可以定制小三角的前景色,背景色和尺寸大小:*/ summary::-webkit-details-marker { color: #fff; background-color: #000; } /* 但是,直接通过::-webkit-details-marker伪元素来修改小三角的样式是行不通的。目前,我们只能通过::before和::after伪元素来替换它们。 */ summary::-webkit-details-marker { display: none; } summary:before { content: "\2714"; /* the new icon */ color: #696f7c; margin-right: 5px; }
该标签只有一个open属性,用来定义对话框是否可见(默认为不可见)
<button>显示对话框</button> <dialog>我是对话框的内容</dialog> <script> var oBtn = document.getElementsByTagName('button')[0]; var oDia = document.getElementsByTagName('dialog')[0]; oBtn.onclick = function(){ console.log(oDia.getAttribute('open')) if(!oDia.getAttribute('open')){ oDia.setAttribute('open','open'); this.innerHTML ='隐藏文本框'; }else{ oDia.removeAttribute('open'); this.innerHTML = '显示文本框'; } } </script>