特性:

  • 所有的 HTML tag 都可以附帶指定 ID 的屬性. 例如:
    <div id="div1" ...>
    <p id="paraX"...>This is a sample paragraph. ...</p>
    <table id="time_zone"><tr>...
    
  • ID 值 (原則上) 必需唯一. (參看 注意事項1)
  • ID 值的合法字元為: 第一個字元為英文字母 [A-Za-z], 加上任何長度組合的 英文字母, 數字 [0-9], 減號 ('-'), 底線 ('_'), 冒號 (':'), 小數點 ('.') (參看 注意事項2)

用途:

  • 用於 CSS selector, 指定需要套用的元素. 例如:
    <style type="text/css">
    #div1 {color:red; margin: 5px;}
    </style>
    ...
    <div id="div1">
    <p>....</p>
    </div>
    
  • 用於建立文件的參考位置 (anchor). 一但 anchor 點標示之後, 自己或別的文件就可以使用 <a> tag 來連結, 語法 <a href='...'>
    • 連結到不同文件的參考位置 <a href="doc_url#id_value">...</a>
    • 連結到同一文件中的參考位置 <a href="#id_value">...</a>
    • 用於同一文件中, 沒有明確的連結目的地. 如: <a href="#" onclick="..." >...</a> 主要是執行 onclick="..." 內的 javascript (註: onclick 為過時的語法, 請改用 HTML 元素的 addEventListener() 來附加事件處理函數)
    • 這類參考位置除了使用 id='...' 來標示之外, 也可以用 name="..." 來標示.
  • 用於 javascript 取得需要參考之 HTML 元素, 例如:
    <div id="id1">
    ...
    </div>
    <script type="text/javascript">
      var xObj = document.getElementById("id1");
      ...
    </script>
    

注意事項:

  1. ID 值不小心不是唯一值時, browser 不會特別產生告警, 但是:
    • CSS selector 使用 #id_value 時對所有重覆(id=#id_value)的元素都有效, 可以正常上色, 改變樣式.
    • 使用 <a href="#id_value"> 只能連結到第一個元素
    • 使用 document.getElementById("id_value") 只會找到第一個元素
  1. 含不合法字元的 ID 值
    • 含有空白字元 (SP) 及井字號 ('#') 的 ID 值是不合法的, 因為 CSS selector 無法表示.
    • CSS selector 會將空白會被解釋成 '包含', 因此無法明確找到這些元素. 只能改用 [id='...'] 來當 selector (但權重不同於 #)
    • 硬要亂搞可以使用 unicode 表示法, 參看 https://mathiasbynens.be/notes/css-escapes

    MagicJackTing 發表在 痞客邦 留言(0) 人氣()