三個不常用的HTML元素：<details>、<summary>、<dialog>

小火柴的藍色理想發表於2015-12-30
HTMLAI

前面的話

　　HTML5不僅新增了語義型區塊級元素及表單類元素，也新增了一些其他的功能性元素，這些元素由於瀏覽器支援等各種原因，並沒有被廣泛使用

 

文件描述

　　<details>主要用於描述文件或文件某個部分的細節，與<summary>配合使用可以為<details>定義標題。標題是可見的，使用者點選標題時，顯示出details

　　[注意]這兩個標籤只有chrome和opera支援

 

<details>

　　該標籤僅有一個open屬性，用來定義details是否可見(預設為不可見狀態)

<details>
    <summary>Copyright 2015.</summary>
    <p>小火柴的藍色理想</p>
</details>

 

對話方塊

　　<dialog>標籤用來定義對話方塊或視窗，且該對話方塊位於視窗的水平居中位置

 

<dialog>

　　該標籤只有一個open屬性，用來定義對話方塊是否可見(預設為不可見)

　　[注意]只有chrome和opera支援

<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>

相關文章