乾貨:詳解HTML5中常見的五大全局屬性

HTML5中新增了“全部屬性”的概念。所謂全局屬性它是指可以對任何元素都可以使用的屬性,今天為大家詳細介紹三種常見的全局屬性。

contentEditable屬性

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

乾貨:詳解HTML5中常見的五大全局屬性

designMode屬性

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

乾貨:詳解HTML5中常見的五大全局屬性

hidden屬性

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

spellcheck屬性

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

乾貨:詳解HTML5中常見的五大全局屬性

tabindex屬性

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

乾貨:詳解HTML5中常見的五大全局屬性

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

每天分享一個知識點,刻意練習,每日精進!


分享到:


相關文章: