HTML5新增屬性：五種全域屬性的介紹

在HTML5中新增了一個HTML中沒有的屬性：全域屬性。顧名思義，全域屬性就是指任何元素都可以使用的屬性，接續的文章內容我們將介紹五種常用的全域屬性。

contentEditable屬性

contentEditable是由微軟開發。被其他瀏覽器反編譯並投入應用的一個全域屬性。它的主要功能是是否允許使用者編輯元素的內容，被編輯元素必須是獲得滑鼠焦點的元素，並且在點擊後要提供一個插入符號，提示使用者該元素中內容允許編輯。 contentEditable屬性是一個布林值屬性，可以指定為ture或false。此屬性還有一個隱藏屬性的inherit狀態，為true是允許使用者編輯;為false時元素不能被使用者編輯;沒有指定時則由inherit狀態決定，如果父元素是可編輯的，該元素也是可編輯的。支援contentEditable屬性元素有A、DD、DIR、DIV、BUTTON、FORM、DL、DT、FONT、DFN、hn、CODE、ABBR等。

designMode屬性

#designMode屬性主要功能是指定整個頁面是否可編輯，頁面可編輯時，頁面中任何支持contentEditable屬性的元素都變成了可編輯狀態。 designMode屬性有兩個值「on」和"off"。屬性為「on」時，頁面可編輯;屬性為「off」時，頁面不可編輯。不過各個瀏覽器支援情況也不一樣，IE8不支援designMode屬性，IE9支援designMode屬性，fixfox和Opera瀏覽器支援designMode屬性、Chrom和Safari瀏覽器在內嵌frame支援designMode屬性。

hidden屬性

在HTML5中所有的元素允許使用hidden屬性。它類似input元素中的hidden屬性，使元素處於不可見狀態。 hidden屬性設定為ture，當元素處於不可見狀態;hidden屬性設定為false時元素處於可見狀態。

spellcheck屬性

spellcheck屬性主要是針對input元素和textarea這兩個文字輸入框提供的新屬性，它的功能是對輸入內容進行拼字和語法檢查。它有個特殊的地方，就是必須聲明屬性值true或false。如果元素是readonly屬性或disabled屬性為true，則不執行拼字檢查。 Firfox、IE、Chrome、Safari等瀏覽器都支援此屬性。

tabindex屬性

tabindex在程式開發概念，是指不斷敲擊Tab鍵讓視窗或頁面中控制項取得焦點，對視窗的控制項進行遍歷，每個控制項的tabindex表示第幾個被存取的。之前這個屬性在編輯網頁很有用，現在是根據元素所在位置決定遍歷順序，所以就不需要了。不過tabindex拎一個作用，只有連結元素與表單元素可以透過按鍵獲得焦點。如果對元素使用了tabindex屬性後，也能讓元素獲得焦點，執行focus()語句時，可以讓元素獲得焦點了。但是這樣會出現一個問題，元素會透過tab獲得焦點，而這時候我們不想讓該元素獲得焦點這不是我們想要的結果。

把元素的tabindex值設定為負數後就可以解決這個問題了。 tabindex為負值時，可以透過程式設計的方式讓元素獲得焦點，但按下Tab鍵該元素就不能獲得焦點了，這在複雜的頁面上是非常有用的。 HTML5中巧妙運用此屬性發揮了很大的作用。

相關推薦：

HTML5新增屬性

#html5新增的屬性和廢除的屬性簡要概述_html5教程技巧

以上是HTML5新增屬性：五種全域屬性的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！