天天看點

《HTML 5+CSS 3入門經典》——2.3 全局屬性

html 5中新增了“全局屬性”概念。所謂全局屬性,是指可以對任何元素都使用的屬性。下面将詳細介紹幾個常用的全局屬性。

2.3.1 contenteditable屬性

contenteditable由microsoft發明,經過反向工程後由所有其他浏覽器實作,現在成為html的正式的部分。

該屬性的主要功能是允許使用者編輯元素中的内容,是以該元素必須是可以獲得滑鼠焦點的元素,而且在點選滑鼠後要向使用者提供一個插入符号,提示使用者該元素中的内容允許編輯。

contenteditable是一個布爾類型屬性,是以可以将其設定為true或false。

除此之外,該屬性還有個隐藏的inherir(繼承)狀态。屬性為true時,元素被指定為允許編輯;屬性為false時,元素被指定為不允許編輯;未指定true或false時,則由inherir狀态來決定,如果元素的父元素是可編輯的,則該元素就是可編輯的。

另外,除了contenteditable屬性外,元素還具有iscontenteditable屬性。當元素可編輯時,該屬性為true;當元素不可編輯時,該屬性為false。

下面是一個使用contenteditable屬性的執行個體,當清單元素被加上contenteditable屬性後,該元素就變成可編輯的了。執行個體代碼如下。

《HTML 5+CSS 3入門經典》——2.3 全局屬性

運作這段代碼,效果如圖2.1所示。在編輯完元素中的内容後,如果想要儲存其中的内容,隻能把該元素的innerhtml發送到伺服器進行儲存,因為改變元素内容後該元素的innerhtml内容也會随之改變,目前還沒有特别的api來儲存編輯後元素中的内容。

《HTML 5+CSS 3入門經典》——2.3 全局屬性

2.3.2 designmode屬性

designmode屬性用來指定整個頁面是否可編輯,當頁面可編輯時,頁面中任何支援上文所述的contenteditable屬性的元素都變成了可編輯狀态。designmode屬性隻能在javascript腳本裡被編輯修改。該屬性有兩個值——on與off。

當屬性被指定為on時,頁面可編輯;被指定為off時,頁面不可編輯。使用javascript腳本來指定designmode屬性的方法如下所示。

《HTML 5+CSS 3入門經典》——2.3 全局屬性

2.3.3 hidden屬性

hidden屬性類似于aria-hidden,它告訴浏覽器這個元素的内容不應該以任何方式顯示。但是元素中的内容還是浏覽器建立的,也就是說,頁面裝載後允許使用javascript腳本将該屬性取消,取消後該元素變為可見狀态,同時元素中的内容也即時顯示出來。hidden屬性是一個布爾型的屬性,當設為true時,元素處于不可見狀态;當設為false時,元素處于可見狀态。

2.3.4 spellcheck屬性

spellcheck屬性是布爾型的屬性,它告訴浏覽器檢查元素的拼寫和文法。如果沒有這個屬性,預設的狀态表示元素根據預設行為來操作,可能是根據父元素自己的spellcheck狀态。因為spellcheck屬性屬于布爾型屬性,是以它具有true和false兩種值。但是它在書寫時有一個特殊的地方,就是必須明确聲明屬性值為true或false,書寫方法如下所示。

《HTML 5+CSS 3入門經典》——2.3 全局屬性

該屬性在opera浏覽器上的表現形式如圖2.2所示。

《HTML 5+CSS 3入門經典》——2.3 全局屬性

2.3.5 tabindex屬性

tabindex是一個舊的概念,指當使用者使用鍵盤導航一個頁面(通常使用tab鍵,盡管某些浏覽器,如最著名的opera,可能使用不同的鍵組合來導航)時,頁面上的元素獲得焦點的順序。

當站點使用深度嵌套的布局表格來建構時,這非常常用,但是如今這已經不再那麼常用了。預設的标簽頁順序是由元素出現在标記中的順序來決定的,是以順序正确和結構良好的文檔應該不再需要額外的标簽頁順序來提示。

tabindex屬性還有一個用處。通常隻有連結、表單元素和圖像映射區域可以通過鍵盤獲得聚焦。添加一個tabindex可以使得其他元素也成為可聚焦的,是以從javascript執行focus指令,就可以把浏覽器的焦點移動到它們上。這也會使得這些元素成為鍵盤可聚焦的,這可不是我們想要的結果。

使用一個負整數允許元素通過程式設計來獲得焦點,但是不應該允許使用順序聚焦導航來到達元素。在html 4中,“-1”對于屬性來說是一個無效的值,并且在除表單字段和連結以外的任何元素上,該屬性自身也是無效的。然而它已經在浏覽器中生效了,并且它解決了一個真正的問題,html 5使其變為到處合法有效。

繼續閱讀