布爾屬性


布爾屬性是控制元素的某一個狀態,是一種比較特別的屬性。由於瀏覽器商之前互相沒協商好,因此在定義布爾屬性時,也有差異。

布爾屬性主要出現 在表單元素上,常見的有radio,checkbox上的checked屬性,option元素的selected屬性,文本域,文本區,密碼域上的readonly屬性,select元素上的multiple屬性,

並且所有 表單元素都支持disabled屬性。

我們在JS設置一個布爾屬性是否發揮作用,通常直接設置true與false

input.disabled = false

由於布爾屬性是一種固有屬性,因此不能使用removeAttribute進行操作。

而在HTML中,只有我們設置了這個屬性,不管它的值是什么,或者干脆就只有屬性名,它都認為其值為true。這是一個大坑,需要大家注意。

在早些年的XHTML規范中,建議大家將屬性名與屬性值寫成一樣,如

<input disabled="disabled" >

由於HTML規范是規定將所有寫在標簽內的屬性名都轉換成小寫,因此disabled與disAbled是一樣的。但在JS寫里就不一樣,如readonly 是對應readOnly,不過事實上,這些大小寫不規則的布爾屬性沒幾個:

defaultChecked,defaultSelected,contentEditable,isMap,noHref,noResize,noShade

下面是分講幾個布爾屬性的用法

  • checked: 其實所有表單元素都有此屬性,但只有radio, checkbox能在圖形上表現出勾選的效果,一旦勾選上,其name及value就能提交
  • selected: option的屬性,一旦選上,就出現高亮狀態,並將其name,value(沒有就取其innerHTML)提交上去
  • readonly: 用於輸入性的控件,讓用戶只能看,不能修改
  • disabled: 讓表單元素蒙上一個灰白的色調,用戶無法操作它,也不會提交其內容
  • multiple:讓下拉框變成多選形式,可以按着SHIFT進行多選
  • hidden: 用於所有元素,這是HTML5新增的布爾屬性,效果如同display:none,但其優先級低於CSS,因此沒有大規范使用
  • contentEditable: 應用於所有可見的非表單元素,讓元素也像INPUT那樣編輯它里面的內容
    擴展閱讀
  • async: 用於script標簽,是近十年出現最有用的屬性,讓腳本不再堵塞頁面加載,早期IE出了一個defer屬性,有關它的區別可見這里


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM